CSS常见布局(5) | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
前言
书接上回,前面已经写了4篇文章了，今天我们继续讲解gird布局，讲得不好，还望见谅！
使用gird布局
使用 grid 布局很简单，通过display属性设置属性值为 grid 或 inline-grid 或者是 subgrid（该元素父元素为网格，继承父元素的行和列的大小） 就可以了。
网格容器中的所有子元素就会自动变成网格项目（grid item），然后设置列（grid-template-columns）和 行（grid-template-rows）的大小，设置 grid-template-columns 有多少个参数生成的 grid 列表就有多少个列。
注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。
行或列最小和最大尺寸
minmax() 函数来创建行或列的最小或最大尺寸，第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受 auto 值。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。
重复行或者列
repeat() 属性可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。
repeat() 也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
间距
grid-column-gap：创建列与列之间的距离。
grid-row-gap：行与行之间的距离。
通过网格线定位 grid item
我们可以通过表格线行或者列来定位 grid item。
自定义网格线名称
在 grid 中，是可以自定义网格线的名称的，然后使用定义好的网格线来进行布局， [col1-start] 网格线名称一定要使用 [] 括住。
