day24 html5

day24ナレッジ

グリッドレイアウト：グリッドレイアウト：子要素のレイアウト
1：グリッド構造の形成（親要素に追加）：
表示：グリッド

   2：划分行和列
     grid-template-columns：3,200px；
     grid-template-rows：3,200px；
     显示3行3列
     如果是3个值 代表3行3列 能接受具体的px 也能是百分比

   划分行和列的时候的关键字 和 方法
   a： repeat(重复的次数，重复的值)
   b： auto-fill关键字（自动填充）
   c： fr关键字       （列表片段）
   d： minmax         （最小值，最大值）

grid-gap：20px 30px;省略表記

プロジェクトが配置されているエリアを指定します
。grid-template-areas：
'aa a'
'.. B'
'。C c';

    注:  grid-template-areas  必须和 grid-area共同使用  grid-area放在具体某个项目里面的,指定项目名称.

指定順：グリッドオートフロー：行/列

プロジェクト内のコンテンツの配置：place-items：

    注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG

親要素のグリッド全体の配置を制御します。