CSS 进阶：网格布局（Grid）及其基本属性

网格布局（Grid）是最强大的 CSS 布局方案。起初我也认为 flex 布局就可以完成绝大部分布局场景，但谁不希望用更直观、更简洁的方式来布局自己的网页呢，于是 Grid 就是我们的下一站，他与 flex 布局互相弥补，并不会互相取代

一、前言

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

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

二、Grid 的基本概念

和 flex 相似，我们要了解一些名词，比如“容器”、“项目”等等

2.1 “容器”和“项目”

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div><div><p>1</p></div><div><p>2</p></div><div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。

2.2 行、列、单元格

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

行和列隔开的格子，被称作“单元格”，我们之后为项目布局，也都是以单元格为单位的。一个 3 行 3 列的布局，自然会产生 9 格单元格

2.3 网格线

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

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

三、容器基本属性

3.1 display

当给元素设置为display: grid;后，默认情况下，容器元素都是块级元素，但也可以设成行内元素。

<style>.grid {display: grid;width: 100px;height: 100px;border: 1px solid red;}span {width: 100px;height: 100px;margin: 10px;border: 1px solid blue;}
</style>
<body><span>1</span><span>2</span><span class="grid">grid</span><span>3</span>
</body>

当你设置.grid{ display: inline-grid }时：

3.2 grid-template-columns、grid-template-rows

我们要规划行和列的相关属性，所以有了这两个属性；

grid-template-columns: 定义每一列的列宽
grid-template-rows: 定义每一行的行高。

直接定每行每列的宽、高

例如：容器的宽 = 高 = 300px，如果要划分每个网格 100 * 100，可以这么写：

<style>.grid {display: inline-grid;width: 300px;height: 300px;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* grid-template-columns: 33.33% 33.33% 33.33%; *//* grid-template-rows: 33.33% 33.33% 33.33%; */}.grid > div {text-align: center;line-height: 100px;}
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div>
</div>

效果如图：为了识别网格，颜色是我通过 JS 随机生成的

而同样的效果，也可以通过 repeat 方法来做到：

<style>.grid {grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);}
</style>

repeat()方法

repeat()接受两个参数，第一个参数是重复的次数（上例是 3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。

第一点我们已经展示了，来看看第二点：

.grid {grid-template-columns: repeat(2, 100px 50px 150px);grid-template-rows: repeat(2, 100px 50px 150px);
}

我利用 repeat()，将一种模式重复排列了 2 次，即第一列和第四列的宽度为 100px，第二列和第五列为 50px，第三列和第六列为 150px，而第一行宽 100px，第二行宽 50px，效果如图：

auto-fill 关键字

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

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

fr(片段)

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

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

fr 可以与绝对长度的单位结合使用，这时会非常方便：例如下面会显示为第一列 100px，剩余宽度内第三列是是第二列的二倍

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

auto

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

.grid {display: grid;width: 100%;grid-template-columns: 100px auto 100px;
}

上面这段代码，可以做到左右两列 100px，而中间自适应。

网格线的名称

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

并且可以起多个名字

.grid {display: grid;width: 100%;grid-template-columns: [c1] 100px [c2] auto [col-3 c3] 100px;
}

3.3 grid-row-gap、grid-column-gap、grid-gap 属性

gap：缺口，即行、列之间项目的间距，让我们轻松脱离 padding 和 margin

grid-row-gap

属性设置行与行的间隔（行间距）

.grid {grid-row-gap: 20px; // 行间距20px
}

grid-column-gap

grid-column-gap 属性设置列与列的间隔（列间距）

.grid {grid-column-gap: 20px; // 行间距20px
}

grid-gap

grid-gap: <grid-row-gap> <grid-column-gap>，它是行列间距的缩写

.grid {grid-gap: 20px;
}

3.4 grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域。

.grid {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";
}
.a {grid-area: a; // 表示它代表grid容器内的a项目
}
...

我们利用这个属性实现本篇文章顶部的图例：

<style>.grid {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 60px 60px 60px;grid-gap: 20px;grid-template-areas:"a a b""a a e""c d e";}.grid > div {text-align: center;}
</style>
<div class="grid"><div class="a" style="grid-area: a">1</div><div class="b" style="grid-area: b">2</div><div class="c" style="grid-area: c">3</div><div class="d" style="grid-area: d">4</div><div class="e" style="grid-area: e">5</div>
</div>

大家可以看到，这样的布局 grid 可以轻松的处理，而 flex 却很难实现。

3.5 justify-items、align-items、place-items 属性

看到前两个属性，熟悉 flex 的同学可能会眼前一亮，在 grid 里，他们的含义很接近

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

他们的取值范围完全相同：

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

来看这样一个例子：

.grid {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-gap: 5px;justify-items: end; // 水平，在单元格右侧
}.grid > div {width: 40px;line-height: 100px;text-align: center;
}

每个项目，都在他所在单元格的右侧（尾端）

align-items也是同理，这里我们就不过多介绍了。

place-items 是上面两个属性的简写形式

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

3.7 justify-content、align-content、place-content 属性

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。

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

直接上代码：

.grid {display: grid;width: 500px;border: 1px solid red;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-gap: 5px;justify-items: end;justify-content: center;
}

符合我们的预期，完美：

同样place-content也是前两个属性的简写形式。

grid-auto-columns、grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

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

四、项目基本属性

4.1 垂直网格线，

grid-column-start：项目左起始网格线
grid-column-end：项目右结束网格线
grid-row-start 项目上起始网格线
grid-row-end 项目下结束网格线

此时我突然想到一个伪居中思路：

.grid {display: grid;width: 300px;border: 1px solid red;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.grid>div {line-height: 100px;text-align: center;
}
.center{grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: 3;
}

当我们确定几行几列，之后，我们可以做到特定的竖直水平居中。

而这几个属性，个人认为在使用上要符合逻辑，比如：

<style>
.grid {display: grid;width: 300px;border: 1px solid red;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.center{grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 3;
}
</style>
<div class="grid"><div class="center">1</div><div class="a">2</div><div class="b">3</div><div class="d">4</div><div class="e">5</div><div class="b">6</div><div class="b">7</div><div class="b">8</div>
</div>

看上去，这只是一个简单的效果，在dom结构上，第一个div在视觉上排在了第4位，这容易让人产生不必要的误解，所以我们在使用时，要结合dom节点的实际位置进行排列组合。

简写

grid-column：是grid-column-start和grid-column-end的合并简写形式
grid-row：grid-row-start和grid-row-end的合并简写形式

.item {grid-column: <start-line> / <end-line>;grid-row: <start-line> / <end-line>;
}

4.2 grid-area 属性

在3.4中我们提到过，grid-area属性指定项目放在哪一个区域。

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

注意：

grid-area还有另一种使用方式，他可以作为作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item-1 {grid-area: 1 / 1 / 2 / 2;
}

写在最后

grid在某些特定的场景下，可以完全替代flex布局，帮助你完成一些看似复杂的css样式设计，希望这篇文章可以帮助你了解grid布局。

参考

网格布局教程

关于我

花名：余光
WX：j565017805
邮箱：webbj97@163.com

其他沉淀

Github: Js 版 LeetCode 题解
前端进阶笔记
CSDN 博客汇总

CSS进阶之关于网格布局(Grid) 你了解哪些相关推荐

【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
网格布局--grid
目录一.定义网格及fr单位 1.1 定义网格及fr单位 1.2 容器 1.3 子项 c. justify-self/align-self/place-self 二.常见布局 2.1 叠加布局三.多 ...
前端网格布局grid
网格布局 <style> .container {border:none;display: grid;height: 600px;grid-template-columns: 200px ...
CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格. 当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道. 这些隐 ...
网格布局(Grid Layout)
.wrapper {/*类名*/ display: grid;/*规定为网格属性*/ grid-template-columns: repeat(3, 1fr);/*定义的行名称和跟踪的大小功能网 ...
CSS进阶（3）- 布局
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录布局多栏布局等高布局元素书写顺序后台页面的布局参考资料布局多栏布局两栏布局 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

CSS进阶之关于网格布局(Grid) 你了解哪些