🦉
grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。
px % repeat() fr
🦉
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。
grid-gap: ;
grid-gap: 20px 20px;
如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。
❤️根据最新标准,上面三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap写成column-gap和row-gap,grid-gap写成gap。
🦉网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: “header header header”
“main main sidebar”
“footer footer footer”;
🦉justify-items属性设置单元格 内容 的水平位置(左中右)
align-items属性设置单元格 内容 的垂直位置(上中下)。
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: ;
🦉justify-content属性是 整个内容区域 在容器里面的水平位置(左中右)
align-content属性是 整个内容区域 的垂直位置(上中下)。