CSS网格布局

CSS 网格布局(CSS Grid)是 CSS 中的一种二维布局系统,可以非常方便地进行网页布局。网格布局的工作原理是将页面划分成一个个网格,然后规定内容放在哪个网格中,从而实现复杂的布局结构。

基本用法

使用网格布局主要分为以下几个步骤:
 

1. 定义容器:

.container {
  display: grid; 
}

2. 设置列和行:

.container {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

3. 定义子元素放在哪个网格区域:

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1; 
  grid-row-end: 2;
}

css网格属性

这里只列举几个　更多可以参考：CSS 网格布局 | 菜鸟教程

•  grid-template-columns/grid-template-rows: 定义列和行
•  grid-column-gap/grid-row-gap: 设置列间距和行间距

   eg. 创建一个网格容器，容器中创建4个列，列间距为10px,行间距为20px
  
  
  代码：

• grid-auto-flow: 设置内容自动放置流向
  语法：grid-auto-flow: row | column | row dense | column dense;
  默认值是row,即"先行后列"的顺序放置元素。
  eg:　这时元素会先放置在第一列,当第一列放不下时再流转到第二列。

  #grid-container {
          width: 800px;
          height: 500px;
          border: 2px solid pink;
  
          display: grid;/*创建一个网格容器*/
          grid-template-columns: auto auto auto auto; /*网格容器中创建四个列*/
          grid-column-gap:10px;  /*列间距*/
          grid-row-gap: 20px; /*行间距*/
          grid-auto-flow: column;/* 设置流向为列 */
      }

  
   row dense和column dense会尽可能紧密填充,尽量占满网格。所以grid-auto-flow属性可以用来控制浏览器自动布局时的内容流向,非常有用。常见的设置有:
  - row - 先行后列(默认)
  - column - 先列后行 
  - row dense - 先行后列,并尽量占满网格
  - column dense - 先列后行,并尽量占满网格掌握该属性可以更好地控制网格中内容的放置顺序
• justify-items/align-items: 设置内容项在单元格内的排列方式

  justify-items 和 align-items 属性可以控制网格中的内容项在其网格单元格内的对齐方式。justify-items 属性设置内容项在网格单元格内的水平对齐方式,语法如下:

  justify-items: start | end | center | stretch;

  例如`justify-items: center;` 表示将内容项水平居中对齐。align-items 属性设置内容项在网格单元格内的垂直对齐方式,语法如下:

  align-items: start | end | center | stretch;

  例如 align-items: end; 表示内容项垂直向下对齐。默认值都是stretch,即内容项会拉伸填满单元格。示例:
   

  .container {
    justify-items: center;
    align-items: end;
  } 

  这会使所有内容项水平居中、垂直朝下对齐。　

• grid-auto-columns 和 grid-auto-rows 属性可以设置浏览器自动创建的列和行的大小。当网格中的元素多于单元格时,浏览器会自动生成新的行和列。我们可以通过这两个属性来设置自动生成行/列的大小。语法如下:

  .container {
    grid-auto-columns: 100px; 
    grid-auto-rows: 50px;
  }

  这将自动生成的列宽设置为100px,行高设置为50px。也可以设置为百分比或其他单位。如果不指定,浏览器完全根据内容自动设定大小。这样可以实现以下效果:- 控制额外网格的行高和列宽
  实现网格中所有行高列宽均匀一致示例:

  .container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
  
    grid-auto-columns: 100px; 
    grid-auto-rows: 50px; 
  }

  上面代码会使自动生成的行和列的大小与指定网格一致。这两个属性给网格布局提供了更大的灵活性和可控性。 （已编辑） 

使用网格布局实现瀑布流

效果图：