码云前端开发 2019-10-17

CSS Grid网格布局实例教程

文章目录隐藏

基本概念

容器和项目
行和列
单元格
网格线

容器属性
项目属性
布局实例

两栏布局
十二网格布局
水平垂直居中
自适应两端对齐
限定列宽的表格
圣杯布局
基于网格线布局

结束语

针对于 Web 布局而言，个人认为 Grid 布局将是 Web 布局的神器，它改变了以往任何一种布局方式或者方法。虽然这些年 js 发展的势头正劲，盖过了 css 的发展风头，但是 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持，大大方便了我们切图仔，再也不需要用 bootstrap 的栅格系统了，网格布局原生支持！不管以前的采用什么布局方法都可以说是一维的布局方式，而 Grid 最大的特色，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。可以说网格布局（Grid）是最强大的 CSS 布局方案。

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

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

基本概念

学习 Grid 布局之前，需要了解一些基本概念。

容器和项目

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

例子：

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

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

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

行和列

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

上图中，水平的深色区域就是”行”，垂直的深色区域就是”列”。

单元格

行和列的交叉区域，称为”单元格”（cell）。

正常情况下，n 行和 m 列会产生 n x m 个单元格。比如，3 行 3 列会产生 9 个单元格。

网格线

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

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

上图是一个 4 x 4 的网格，共有 5 根水平网格线和 5 根垂直网格线。

容器属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

容器属性必须设置在容器上。

设置容器为行性质或内联性质的网格布局：

display: grid;
display: inline-grid;

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

grid-template-columns: 100px 100px 100px; // 将容器设为三列，每列的列宽为 100px
grid-template-rows: 100px 100px 100px; // 将容器设为三行，每列的行高为 100px
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'; // 定义区域名，由单个或多个单元格组成
grid-template // 上面三个属性的合并简写形式，不易读易写，不建议使用
grid // 多属性合并，不易读易写，不建议使用

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
比如，区域名为 header，则起始位置的水平网格线和垂直网格线叫做 header-start，终止位置的水平网格线和垂直网格线叫做 header-end。

设置项目之间的间隔

grid-row-gap: 20px; // 设置行与行的间隔
grid-column-gap: 20px; // 设置列与列的间隔
grid-gap: <grid-row-gap> <grid-column-gap>; // grid-column-gap 和 grid-row-gap 的合并简写形式，也可直径写做 gap

整个内容区域在容器里面的水平/垂直位置

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>; // align-content 属性和 justify-content 属性的合并简写形式

项目内容在单元格中的水平/垂直位置

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

repeat() / minmax()函数和 auto-fill/auto/fr 关键字

grid-template-columns: repeat(3, 100px); // 3 列， 每列 100px
grid-template-columns: repeat(auto-fill, 100px); // 自适应列数， 每列 100px
grid-template-columns: repeat(3, 1fr); // 3 列，每列等宽
grid-template-columns: 100px 1fr 2fr; // 第一列 100px，剩余空间 1 : 2 分配给第二第三列
grid-template-columns: 100px auto; // 第一列 100px，第二列自适应剩余空间
grid-template-columns: 1fr 1fr minmax(200px, 2fr); // 前两列 1 等宽 ，最后一列最小 200px ，正常情况下是前一列的 2 倍
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] 为网格线名

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

grid-auto-columns: 50px 50px 50px; // 超出所定义网格行的列宽
grid-auto-rows: 50px 50px 50px; // 超出所定义网格行的行高
grid-auto-flow // 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense

项目属性

项目属性必须设置在项目上。

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

grid-column-start: 1; // 左边框所在的垂直网格线
grid-column-end: 2; // 右边框所在的垂直网格线
grid-row-start: 1; // 上边框所在的水平网格线
grid-row-end: 2; // 下边框所在的水平网格线
grid-column: 1 / 2; // grid-column-start 和 grid-column-end 的合并简写形式 也可以结合网格线和 span 关键字
grid-row:1 / 2; // grid-row-start 属性和 grid-row-end 的合并简写形式 也可以结合网格线和 span 关键字
grid-area: a // 指定项目放在哪一个区域  由容器上的 grid-template-area 划分区域

justify-self: start | end | center | stretch; // 设置单元格内容的水平位置
align-self: start | end | center | stretch; // 设置单元格内容的垂直位置
place-self: <align-self> <justify-self>; // align-self 属性和 justify-self 属性的合并简写形式

布局实例

两栏布局

一侧固定，一侧自适应

关键代码：

<style>
.container{
  display: grid;
  grid-template-columns: 100px auto; /* 或者 100px 1fr */
  height: 200px;
}
</style>
<div class="container">
  <aside></aside>
  <main></main>
</div>

效果展示：

十二网格布局

关键代码：

<style>
.container{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  text-align: center;
}
</style>
<div class="container">
  <div>1</div>
  . . .
</div>

效果展示：

水平垂直居中

目前 grid 布局是唯一一个一行 css 代码实现水平垂直居中布局的方法

关键代码：

<style>
.container{
  display: grid;
  place-content: center;
}
</style>
<div class="container">
  <div>码云笔记 mybj123.com</div>
</div>

效果展示：

自适应两端对齐

这种效果难在实现最后一行左对齐的效果。如果使用 flex 布局或者 text-align: justify （参考此处）方法，则需要使用等列的空标签占位，而如果不确定总共有多少列的话则难以实现最后一行左对齐的效果。而 grid 布局则可完美实现两端对齐最后一行左对齐的效果。

项目宽度固定：

<style>
.container{
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	justify-content: space-between;
	gap: 30px;
}
.item{
	width: 100px;
	height: 100px;
	font-size: 4em;
	text-align: center;
	border: 1px solid blueviolet;
}
</style>
<div class="container">
  <div class="item">1</div>
  . . .
</div>

效果展示：

项目宽度不固定：

<style>
.container{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
	grid-auto-rows: minmax(100px,auto);
	gap: 30px;
}
.item{
	border: 1px solid #8A2BE2;
}
</style>
<div class="container">
  <div class="item">1</div>
  . . .
</div>

效果展示：

限定列宽的表格

第三列正常是前两列之和，最小是 200px ：

<style>
.container{
	display: grid;
	grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
.container div{
	border: 1px solid #8A2BE2;
}
</style>
<div class="container">
  <div>1</div>
  . . .
</div>

效果展示：

圣杯布局

自适应移动端的圣杯布局

<style>
.container{
	display: grid;
	grid-template-columns: 150px auto 150px;
	grid-gap: 1em;
}
header,footer{
	grid-column: 1 / 4;
}
header,aside,article,footer{
	background: #eaeaea;
	display: grid;
	place-content: center;
	height: 17vh;
}
@media all and (max-width: 700px;) {
	aside,article{
		grid-column: 1 / 4;
	}
}
</style>
<div class="container">
  <header>Header</header>
  <aside>Left Sidebar</aside>
  <article>Article</article>
  <aside>Rite Sidebar</aside>
  <footer>Footer</footer>
</div>

效果展示：

基于网格线布局

基于网格线数字编号安放项目，推荐阅读我之前写过的一篇文章《3 种方案实现跨行或跨列布局》

<style>
.container{
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-gap: 10px;
}
.box{
	padding: 20px;
	border-radius: 5px;
	background: brown;
	color: #fff;
	font-size: 150%;
}
.a{
	grid-column: 1 / 3;
	grid-row: 1;
}
.b{
	grid-column:  3;
	grid-row: 1 / 3;
}
.c{
	grid-column: 1;
	grid-row: 2;
}
.d{
	grid-column: 2;
	grid-row: 2;
}
</style>
<div class="container">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

效果展示：