CSS Grids教程学习笔记

广西嘉华李家鸣

这是我在学习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-template-columns: repeat(auto-fill, minmax(200px, 1fr));可以设置列最小为200px，自动列数，有多余空间就使用掉。

 

隐形grid和显性grid的区分：

隐形grid是指指定列，没有指定行数，宽度大小都是默认auto，当溢出时就变成和flexbox差不多一样的排列显示方式。

显性grid是指指定了列和行，使用grid-auto-rows和grid-auto-columns属性指定行和列的大小。

 

Grid-auto-rows: minmax(100px, auto);可以设置行高最小100px,最大auto。

 

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;
}

来源：https://www.cnblogs.com/yangzetaodecnblogs/p/13728939.html