✍️ CSS - Grid Layout（MDN） - 《📝 前端笔记分享》

一、简介

网格布局（grid layout）是二维布局模型

我们先使用 display: grid 或 display: inline-grid 创建 grid container，然后它的子元素都是 grid item，它有行、列、轨道、网格线、网格单元、网格区域、槽的概念

网格相关的属性

grid-template-columns：设置 grid container 的列轨道
grid-template-rows：设置 grid container 的行轨道
grid-template-areas：设置 grid item 的占据区域，使用时需要与其 grid-area 关联起来
grid-template：是 grid-template-area、grid-columns、grid-rows 的简写属性
grid-auto-columns：设置 grid container 的隐式列轨道
grid-auto-rows：设置 grid container 的隐式行轨道
grid-auto-flow：设置 grid item 自动放置到网格的方式
grid：是 grid-auto-columns、grid-auto-rows、grid-auto-flow、grid-template-areas、grid-template-columns、grid-template-rows 的简写属性
grid-row-start：设置 grid item 的行起始位置
grid-column-start：设置 grid item 的列起始位置
grid-row-end：设置 grid item 的行结束位置
grid-column-end：设置 grid item 的列结束位置
grid-row：是 grid-row-start、grid-row-end 的简写属性
grid-column：是 grid-column-start、grid-column-end 的简写属性
grid-area：是 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写属性
row-gap：设置 grid container 的行槽大小
column-gap：设置 grid container 的列槽大小
gap：是 row-gap、column-gap 的简写属性

一些函数