前言：flex 是一维布局、grid 是二维布局

1. 容器属性

.container {width: 500px;height: 500px;/* 容器的类型为块元素grid还是行内元素inline-grid */display: grid;border: 1px solid;/* 设置列和列宽：auto-fill，屏幕每行容纳最多的200px的盒子 */grid-template-columns: repeat(auto-fill, 200px);/* fr：剩余空间平均后的一等分 *//* grid-template-columns: 200px 1fr 2fr 3fr; *//* minmax：最大和最小尺寸，如下 最小300px，最大2fr *//* grid-template-columns: 1fr 1fr minmax(300px, 2fr) *//* auto：宽度自适应 *//* grid-template-columns: 100px auto 100px; *//* 设置 行间距 列间距 */grid-gap: 10px 20px;/* 设置行高：设置每列高度都为200px */grid-auto-rows: 200px;/* 单独设置每列的行高 *//* grid-template-rows: 100px 200px; *//* 设置区域命名，同子项目里的grid-area使用 */grid-template-areas:". header header""sidebar content content";// header子项目占了两份.header {grid-area: header;}// 单元格内容水平位置justify-items: start | end | center | stretch;// 单元格内容垂直位置align-items: start | end | center | stretch;// 整个内容区域在容器里面的水平位置justify-content: start | end | center | stretch | space-around | space-between| space-evenly;// 整个内容区域的垂直位置align-content: start | end | center | stretch | space-around | space-between |space-evenly;
}

2. 项目属性

.child {// 可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;// 单元格内容的水平、垂直位置，同justify-items、align-items只作用于单个项目justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}