- A+
这是我在学习MDN内CSS Grids教程的学习笔记，教程地址：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
注：这个笔记之能做温习只用，看教程请上以上地址学习或者其他教学资源。
容器上设置display: grid;就成为了grid容器。
Grid容器上设置：
grid-template-column: 200px auto 1fr;可以设置各个列。1fr是占比，空间先被200px这样的固定宽度占用，剩下的再按各自fr的占比分配。
grid-column-gap或column-gap设置列之间的间隔宽度，不能使用fr。
grid-row-gap或row-gap设置行之间的间隔宽度，不能使用fr。
grid-gap或gap可以同时设置行和列的间隔宽度，不能使用fr。
grid-template-column: repeat(3, 1fr)可以设置三个各为1fr的列。
隐形grid和显性grid的区分：
隐形grid是指指定列，没有指定行数，宽度大小都是默认auto，当溢出时就变成和flexbox差不多一样的排列显示方式。
显性grid是指指定了列和行，使用grid-auto-rows和grid-auto-columns属性指定行和列的大小。
Grid-auto-rows: minmax(100px, auto);可以设置行高最小100px,最大auto。
Grid-auto-columns: repeat(auto-fill, minmax(200px, 1fr));可以设置列最小为200px，自动列数，有多余空间就使用掉。(好像要配合以上的grid-auto-rows才有效果！！！)
Grid元素上设置：
grid-column: 1 / 3;可以设为1到3列的横跨排布；-1为最后一列
grid-row: 2;可以设为在第二行的排布；-1为最后一行
grid-column-start，grid-column-end，grid-row-start，grid-row-end为以上的拆分。
以下属性放在grid容器上可以设置排布模板（只能是矩形，可以使用点符号 . 来代替空白）：
grid-template-areas:
“header header”
“sidebar content”
“footer footer”；
然后再各个grid元素上设置：grid-area: header;这样。
Grid可以代替像bootstrap这样的框架，可以设置12列，以下是line-based的图：
如下代码设置每个grid元素的位置和占比。
header { grid-column: 1 / 13; grid-row: 1; } article { grid-column: 4 / 13; grid-row: 2; } aside { grid-column: 1 / 4; grid-row: 2; } footer { grid-column: 1 / 13; grid-row: 3; }
