CSS之Grid网格布局详解

站长

2024年04月05日 17:30 · 阅读数 7

网格布局

CSS之Grid网格布局详解

基本概念

容器和项目

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid（设成行内元素）后，它就变成了一个网格容器（container），这个元素的所有直系子元素将成为网格元素，称为项目（item）。

.box { 
  display: grid | inline-grid; 
}

注意： 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

CSS之Grid网格布局详解

单元格

行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

CSS之Grid网格布局详解

图示中绿的背景为4个单元格，单元格各自有一个项目item。

注意：需要区分单元格和项目元素，比如一个3*3的九宫格，项目元素不一定就是9个，项目元素个数由开发者决定。

容器属性

一、grid-template-columns、 grid-template-rows

grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高

1、固定值 px

代码：

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

效果：

CSS之Grid网格布局详解

2、百分比 %

代码：

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
}

效果：

CSS之Grid网格布局详解

3、repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。

将上面的代码用repeat()改写如下：

.container {
  display: grid;
  grid-template-columns: repeat(4,25%);
  grid-template-rows: repeat(2,50%);
}

repeat()接受两个参数

参数一：重复的次数（上例分别是列为4，行为2）
参数二：重复的值。

repeat()重复某种模式也是可以的。

代码：

.container {
  display: grid;
  grid-template-columns: repeat(2, 40px 60px 80px);
  grid-template-rows: repeat(2,50%);
}

上述代码是将列宽为40px、60px、80px重复2次；行高2行，等分容器的高度。

图示：

CSS之Grid网格布局详解

4、fr

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。

代码1：

.container {
  width: 300px
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

图示1：

CSS之Grid网格布局详解

同时，fr可以与绝对长度的单位结合使用，这时会非常方便。

代码2：

.container {
  width: 300px
  display: grid;
  grid-template-columns: 1fr 100px 2fr
}

上面代码表示，第二列的宽度为固定的100px，第三列的宽度是第一列的2倍。

图示2：

CSS之Grid网格布局详解

5、 minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码表示，第三列的宽度不小于100px，不大于1fr。

6、auto

auto关键字表示由浏览器自己决定长度。

代码：

.container {
  width: 300px
  display: grid;
  grid-template-columns: 50px auto 50px;
}

上面代码中，第二列的宽度为容器宽度除第一、第三列的总宽度外所占最大的宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

图示：

CSS之Grid网格布局详解

7、auto-fill、auto-fit

auto-fill 与 auto-fit 直译为 自适应 与 自填充，一般用来实现自适应布局的。

代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

图示：

CSS之Grid网格布局详解

是不是有点响应式的感觉了！

除了auto-fill，还有一个auto-fit，我们看两者在MDN上的解释。

auto-fill：

If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。

auto-fit：

Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed。

行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将消失。简单来说，就是如果元素数量不够放满一行，则 auto-fit 会将元素平铺，铺满一行

举个例子：

fill - 代码：

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
}

图示：

CSS之Grid网格布局详解

fit - 代码：

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px , 1fr));
}

图示：

CSS之Grid网格布局详解

只有一个项目的情况下，容器固定宽度400px，minmax(200px , 1fr)含义是列宽最小为200px，最大是占满整个一行。这时候，因为元素数量不够放满一行，如果再有一个或更多的元素还可以继续填充的情况下，auto-fill就自适应为列宽200px；auto-fit 会将元素平铺填充至一行。

8、网格线名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

代码：

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows:    [r1] 100px [r2] 100px [r3] 100px [r4];
}

上述代码表示 3*3 的九宫格，4根垂直的网格线的名称分别是c1、c2、c3、c4；4根水平的网格线名称分别是：r1、r2、r3、r4。

图示：

CSS之Grid网格布局详解

同时网格布局允许同一根线有多个名字，比如：

grid-template-columns: [c1 c11 c111] 100px [c2 c22] 100px [c3] 100px [c4];

二、grid-template-area，grid-area(项目属性)

1、 grid-template-area

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成，用于定义网格区域名称。

代码：

.container {
 grid-template-columns:50px 50px 50px;
 grid-template-rows: 50px 50px 50px;
 grid-template-areas: 'a b c'
                      'd e f'
                      'g h i';
}

以上代码定义了 3*3的九宫格，每个单元格的区域名称分别是a~i。

图示：

CSS之Grid网格布局详解

2、grid-area （项目属性）

grid-area是项目属性，指定项目放在哪一个区域。一般搭配grid-template-area使用。为了方便理解，这里放一起说明。

示例一：基于上述的3*3的网格，需求是把item1放到中的单元格。

.item-1 {
  grid-area: e;
}

中间区域的单元格名称是e，直接指定项目item1的grid-area属性值为e即可。

图示：

CSS之Grid网格布局详解

还可以通过项目指定区域，合并单元格。

示例二：3*3单元格，5个项目元素，第一行和第二行的单元格分别合并。

.container {
 grid-template-areas: 'a a a'
                      'b b b'
                      'c d e';
}

上述代码表示有3*3九宫格，其中第一行和第二行分别指定同一个区域。

.item-1 {
  grid-area: a;
}
.item-2 {
  grid-area: b;
}

上述代码表示将Itme1放到区域为a的位置，即占满第一行。将Itme2放到区域为b的位置，即占满第二行。

图示：

CSS之Grid网格布局详解

示例三：练习一个常见的布局

.container {
 grid-template-areas: 'header header header'
                      'side main main'
                      'footer footer footer';
}

通过名称就知道有4个项目元素，再指定各个项目所在网格位置：

.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: side;
}
.item-3 {
  grid-area: main;
}
.item-4 {
  grid-area: footer;
}

CSS之Grid网格布局详解

注意：所有指定项目区域或其他方式来合并单元格，只能合并矩形，L型或其他形状均无效。

三、column-gap、row-gap、gap

column-gap：列与列的间隔（列间距）。
row-gap：行与行的间隔（行间距）
gap属性是grid-column-gap和grid-row-gap的合并简写形式。如设置一个值则 列间距 = 行间距。

CSS之Grid网格布局详解

四、grid-auto-flow

划分网格以后，容器的子元素item会按照顺序，自动放置在每一个网格。grid-auto-flow就是定义单元格排列顺序和排列方式。

1、row、column

默认值row，即放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。如下图示：

.container {
  width: 200px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px;
}

CSS之Grid网格布局详解

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column;

CSS之Grid网格布局详解

2、row dense、column dense

代码：

.container {
  padding: 3px;
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
  gap: 3px;
}
.item1 , itme2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

上述代码就是将item1和itme2占据2个单元格（语法后续会讲到）。在默认的grid-auto-flow: row情况下，产生下面这样的布局：

CSS之Grid网格布局详解

图示中，item1后是空白，因为itme2的水平网格线从1开始到3结束，即占了2个单元格，而itme3排序默认在itme2后面。

现将grid-auto-flow: row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。效果如下图示：

CSS之Grid网格布局详解

五、 justify-items、align-items、place-items

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

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

1、justify-items

属性值	描述	图示
start	左对齐。
end	右对齐
center	居中对齐
stretch	拉伸，占满单元格的整个宽度（默认值）。

2、align-items

3、place-items

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: <align-items> <justify-items>;

如果省略第二个值，则浏览器认为与第一个值相等。

容器只有一个元素下，居中样式又有一种写法了：

.container {
  display: grid;
  place-items: center;
}

六、justify-content、align-content、place-content

justify-content属性是整个内容区域在容器里面的水平位置（左中右及空白分配），align-content属性是整个内容区域的垂直位置（上中下及空白分配）。其效果跟Flex布局一样。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

1、justify-content

2、 align-content

属性值	图示	属性值	图示
start		space-around
end		space-between
center		space-evenly

3、place-content

place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content: <align-content> <justify-content>

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

同样的，若容器只有一个元素下，居中样式也可以这样：

.container {
  display: grid;
  place-content: center;
}

七、 grid-auto-columns、grid-auto-rows

简单来说，定义容器中多余网格的列宽、行高。比如，网格设置了2行3列，但项目元素一共有8个，如下：

代码一

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

图示一：

CSS之Grid网格布局详解

也或者，改变item7和item8的水平网格线的起始位置来改变其位置，具体怎么改变下文会讲到。

代码二：

.container {
  grid-template-columns:50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}
.item7 {
  grid-row-start: 4;
  grid-column-start: 2;
}
.item8 {
  grid-row-start: 5;
  grid-column-start: 3;
}

图示二：

CSS之Grid网格布局详解

上面2个例子都能看到在超出设置的网格后，单元格变得奇怪了，行高不受控制了。这时候就可以设置grid-auto-rows属性来固定行高：

CSS之Grid网格布局详解

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

八、 grid-template

该属性是 grid-template-columns、grid-template-rows、grid-template-areas 这三个属性的简写形式。

九、grid

该属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这六个属性的简写形式。

项目属性

一、grid-column-start、grid-column-end、grid-column grid-row-start、grid-row-end、grid-row

项目的位置是可以指定的，除了使用上述说明过的grid-template-area和grid-area搭配使用来指定，也可以指定项目的四个边框，分别定位在哪根网格线来指定项目的位置和占用的单元格。

grid-column-start：定义项目左边框所对齐的垂直网格线
grid-column-end：定义项目右边框所对齐的垂直网格线。
grid-column：是grid-column-start和grid-column-end的简写形式 （start / end）
grid-row-start：定义项目上边框所对齐的水平网格线。
grid-row-end：定义项目下边框所对齐的水平网格线。
grid-row：是grid-row-start和grid-row-end的简写形式 （start / end）

示例一：基于九宫格改造下：

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  
  /* 简写 */
  grid-column: 2 / 4;
}
.item-2 {
  grid-row-start: 1;
  grid-row-end: 4;
  
  /* 简写 */
  grid-row: 1 / 4;
}

上述代码表示：简单来说，将Item1的从第2根垂直网格线开始，到第2根垂直网格线结束，效果就是Item1右移一个单元格，且占用2个单元格；将Item2的从第1根水平网格线开始，到第4根水平网格线结束，效果就是Item2上移一个单元格，且占用3个单元格。

图示：

CSS之Grid网格布局详解

示例二：常见的header-side-main-footer布局

.item1 {
  grid-column: 1 / 4;
}
.item2 {
  grid-column: 1 / 2;
}
.item3 {
  grid-column: 2 / 4;
}
.item4 {
  grid-column: 1 / 4;
}

图示：

CSS之Grid网格布局详解

示例二：存在空格情况

.item-1 {
  grid-column: 2 / 4;
}

上述将Item1右移一个单元格，且占用2个单元格。

图示：

CSS之Grid网格布局详解

上图中，只指定了Item1的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了Item1以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。我们可以通过设置这个属性的值为column、row dense或column dense来改变布局。

比如设置 grid-auto-flow:row dense，尽可能填满。效果如下：

CSS之Grid网格布局详解

span 关键字

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

示例：header-side-main-footer布局

.item1 {
  grid-column-start: span 3;
}
.item2 {
  grid-column: 1 / 2;
}
.item3 {
  grid-column: 2 / span 2;
}
.item4 {
  grid-column-end: span 3;
}

每个项目的属性写法均有差异，可行体会。

二、grid-area

见上文

justify-self、align-self、place-self

justify-self：定义项目在单元格区域内的水平位置（左中右）
align-self：定义项目在单元格区域内的垂直位置（上中下）
place-self：同时定义项目在单元格区域内的水平和垂直位置，是 align-self 和 justify-self 的简写。若省略第二个值，默认两个值相等。

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）。

justify-self

定义单个项目在单元格内的水平位置（左中右）

属性值	图示	属性值	图示
start		center
end		stretch

align-self

定义单个项目在单元格内的垂直位置（上中下）

兼容性

CSS之Grid网格布局详解

可以看到兼容性还是不错的，后续应该会越来越广泛使用。

CSS的Grid网格布局差不多到这里就结束了，个人的学习总结，有误的地方欢迎指正！