CSS3 grid 布局的简单使用

CSS3 grid 网格布局的使用

1.概述

如果你要做成以下的这种效果，你会怎么做？

你可以选择使用 absolute 绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现。

当然最简单的方法是使用 CSS3 grid网格布局。

grid 布局能够让我们更加灵活组织盒子的搭配方式。

2.一些概念

1. 行和列的概念

   1. column -> 代表列，属性中有 column 的一般都是列的属性。
   2. row -> 代表行，属性中有 row 的基本都是行的属性。

2. 容器和项目

   1.  <div>
       	<span>1span>
       	<span>2span>
       	<span>3span>
       div>
      

   2. 上面的 div 就是容器，三个 span 都是项目。

3. 在一个网格布局中，如果有 2 × 2 的四个网格，那么就会有 3 × 3 的网格线，因为一个网格有两遍。

4. 在 grid 布局中，我们可以使用 fr 关键字，它的意思是 fraction，即片段的意思，下面的代码意为着第二列和第三列的列宽是 1:2 的关系，并且 fr 可以与 px 一起混用。

   .content {
       display:grid;
       grid-template-columns:100px 1fr 2fr
   }
   

3.一些关键属性实现文章开始的效果

• display:grid：代表着使用 grid 布局。
• grid-template-columns：确定有多少列以及每一列的宽度。
• grid-template-rows：确定有多少行以及每一行的高度。
• grid-row-gap：设置行间距。
• grid-column-gap：设置列间距。
• grid-column-start：确定元素的高度是从哪一行开始。
• grid-column-end：确定元素的高度是到哪一行结束。
• grid-row-start：确定元素的宽度是从哪一行开始。
• grid-row-end：确定元素的宽度是到哪一行结束。

由最后的四个属性可以确定元素的位置。

其他的元素没有特殊的设置就会是按照文档流的顺序排列。

我们直接以最开始的例子来理解这些属性。

代码：

4.其他的一些属性

学会了以上的一些属性，就已经可以写出一定的效果了，至于每一个网格内，依然可以采用 flex 布局

其他的一些属性：

1. 网格线可以设置名称

   1.  grid-template-columns：[line1] 100px [line2] 100px [line3] 100px [line4]
      

   2.  grid-template-columns：[line5] 100px [line5] 100px [line5] 100px [line8]
      

   3.      grid-column-start: c3;
           grid-column-end: c4;
      

      在使用过程中可以用网格线的名字代替索引

2. 行间距 和 列间距 可以合在一起

   grid-gap:20px 20px;
   

3. 网格可以给每一个区域定义名字

   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
   

   如果想要使几个部分合并的话，只需要起相同的名字即可。

   grid-template-areas: 'a b c'
                        'b b c'
                        'c c c';
   

   如果某一部分不需要，可以用 . 代替即可。

   

4. grid-auto-flow：默认的放置顺序是先行后列

   1. 默认值是 row
   2. 可以改为 column，这样就变成了先列后行
   3. 还可以是 row dense，用于有几个元素已经指定了位置，表示剩余的按行排列，并且尽可能填满（注意与row的区别，row不一定是排满的）
   4. 也可以是column dense，也是有几个元素已经指定了位置，表示剩余的按先列后行排列，尽量排满。