Grid 布局-属性浅记理解Grid布局 Grid 布局是二维布局又叫网格布局 Grid 布局是将容器划分成了“行”和

理解Grid布局

Grid 布局是二维布局

又叫网格布局

Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高。

repeat(重复次数，重复值) 函数：简化重复的值。

repeat的第一个参数可以为auto-fill 关键字，不设置固定项目个数，表示填充满为止。
grid-template-columns: repeat(auto-fill, 200px)

fr 单位代表网格容器中可用空间的所占份额。
grid-template-columns: 200px 1fr 2fr;//有三列，第二列占剩余空间1/3,第三列占剩余空间2/3。

minmax(最小值,最大值) 函数：给网格元素设置最小和最大尺寸。
grid-template-columns: 1fr 1fr minmax(300px, 2fr)

auto 关键字:自适应

//实现圣杯布局
{ 
    display: grid; 
    grid-template-columns: 100px auto 100px; 
    grid-gap: 5px; 
    grid-auto-rows: 50px; 
}

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。

grid-row-gap: 10px;     //----行间距是 10px，
grid-column-gap: 20px;  //----列间距是 20px。

grid-gap: 10px 20px;    //----合并上述两步

使用grid-area给元素设置标识名称，然后在grid-template-areas进行填充描述。

。。。。。。
grid-template-areas: ". div3" "div2 div1";//在父元素中填充,第一个`.`表示跳过填充的位置。

grid-area: div1;//在子元素中设置标识名称

设置单元格水平位置对齐方式:

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;

隐式和显式网格：

显式网格包含了在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。

隐式网格的行高和列宽根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。使用方法和设置显示网格方法一致。如果不指定，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高

grid-area 属性指定项目放在哪一个区域。