grid布局

CSS Grid 网格布局教程 - 阮一峰的网络日志

一、grid布局

1、基础知识

1.1 概述

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

1.2项目

项目只能是容器的顶层子元素，不包含项目的子元素

<ul>
	<li><a href='#'></a></li>
	<li><a href='#'></a></li>
	<li><a href='#'></a></li>
	<li><a href='#'></a></li>
</ul>

在该例子中，ul是容器，li是项目，li的子元素a就不是项目

1.3行列

​ row行

​ column列

1.4网格线

n行有n+1根水平网格线

m列有m+1根垂直网格线

2、容器属性

2.1 display

​ display: grid指定一个容器采用网格布局。

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

2.2 划分行列

​ grid-template-columns 定义每一列的列宽

​ grid-template-rows 定义每一行的行高

2.21 使用绝对单位 200px

2.22 使用百分比 33.33%

2.23 使用函数repeat()

grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);

​ repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值

2.24 auto-fill

​ 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

​ 该属性比较常见与响应式布局

2.25fr关键字

​ 网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

2.26minmax()

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

​ 这个与 auto-fill经常用于响应式布局

2.27auto关键字

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

2.28，实现两栏布局

​ grid-template-columns: 70% 30%;

2.3 间隔

grid-row-gap 属性，: 行与行的间隔（行间距）

grid-column-gap 属性，: 列与列的间隔（列间距）。

grid-gap 属性:grid-column-gap和grid-row-gap的合并简写形式

​ grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

​ 根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

2.4排列顺序 grid-auto-flow

​ 划分网格以后再调用

​ 容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行

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

3、单元格内容位置(所有的)

​ justify-items属性设置单元格内容的水平位置（左中右）

​ align-items属性设置单元格内容的垂直位置（上中下）。

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

justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>;

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）
• 如果网格项目（grid item）的宽度被明确设置（例如通过 width 属性），那么 将不会生效。

4、整个内容区域的位置

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

	justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

  	align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

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

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

5、项目属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

• grid-column-start属性：左边框所在的垂直网格线
• grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线
• grid-row-end属性：下边框所在的水平网格线

​

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

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。

6、合并简写形式

grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;

7、只作用于（单个项目）

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

这两个属性都可以取下面四个值。

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

二、为什么要使用网格布局

如图所示，我们经常使用flex布局,当用space-between时就会出现问题

三、响应式用法

grid-template-column:repeat(auto-fill,minmax(260px,1fr));

四、b站布局

grid-row:从第几行开始 / 占n-1行

grid-column:1/3从第几列开始，占2列 （1+2=3）

图所示，我们经常使用flex布局，

[外链图片转存中…(img-4K0Cz6w5-1730766779245)]

三、响应式用法

grid-template-column:repeat(auto-fill,minmax(260px,1fr));

四、b站布局

grid-row:从第几行开始 / 占n-1行

grid-column:1/3从第几列开始，占2列 （1+2=3）