day24 html5

day24 knowledge

Grid layout: grid layout: for child element layout
1: forming a grid structure (added to the parent element):
display: grid

   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; shorthand

Specify the area where a certain project is located:
grid-template-areas:
'aa a'
'.. B'
'. C c';

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

Specified order: grid-auto-flow: row / column

The alignment of the content in the project: place-items:

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

Controls the alignment of the entire grid in the parent element. Place-content :;