Css Grid 网格布局

Gird/Flex

同：指定容器内部的多个项目的位置
异：

• Flex是轴线布局
• 只能指定‘项目’针对轴线的位置（一维布局）
• Grid将容器分成‘行’和‘列’，产生单元格，
• 指定‘项目所在’的单元格（二维布局）

Gird基本用法

指定三行三列 宽高为10px

grid-template-columns: 10px 10px 10pxgrid-template-rows: 10px 10px 10px

简写

grid-template-columns: repeat(3, 10px);

auto-fill 填充 在一行中尽可能摆放盒子

grid-template-columns: repeat(auto-fill, 50px);

fr 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

grid-template-columns: 1fr 2fr;

间距 gap 最新版中grid前缀 已删除

grid-row-gap: 20px; //行与行的间隔（行间距）grid-column-gap: 20px; // 列与列的间隔（列间距）//简写gird-gap: 20px 20px;

单元格内容位置 justify-items align-items
对齐后div会变为内容大小向对齐方向缩小
template 指定大小无效
解决方案: 指定div padding 或者 width

justify-items: start | end | center | stretch;align-items: start | end | center | stretch;

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。
  合并简写形式 place-items

place-items: <align-items> <justify-items>;place-items: start end

整个内容区域在容器里面位置 justify-content align-content

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly

合并简写形式 place-content

place-content: <align-content> <justify-content>;place-content: start end