第8天：布局翘楚 - Grid 布局概述

昨天的内容第7天: position 布局之绝对布局 absolute 比较简单，今天再来点比较难，也比较重要的内容，回过头再把 position 的内容补全，难易结合。

grid 是一种网格布局，之所以被称为网格布局，在我看来它就是一张网，类似于一个 excel 表格，可以做出各式各样的网页布局。相比 Flexbox 布局，网格布局更胜一筹，它是「二维」的，也就是说它不仅可以对行（row）进行控制，同时又能对列（column）进行控制。不过网格布局与 Flexbox 布局思想有着很多相似之处，都具有「弹性」。

FlexBox 布局也可以做到 n 行 n 列的布局，为什么还会出现 grid 布局？这个问题我想大多数同学都会有疑惑。我们举一个例子来解除这种疑惑。

上图中的布局使用的是 FlexBox 做的 2 行 2 列布局，主轴对齐方式为 space-around。如果想让第 2 行元素的对齐方式设置为 flex-start，咋么做？FlexBox 布局根本做不到，它只能同时控制所有的行。这就是为什么会出现 grid 布局的原因之一。

学习网格布局，我通常会把它与 excel 进行比较，因为他们具有很多相似之处。下面就是一个 6行5列的 Excel 表格：

在学习 grid 布局时需要先弄懂一些基本的概念（一图胜千言）：

通过一个 demo 来说明 grid 布局的基本概念，demo 主要代码如下，在这里可以找到前端小课的所有代码：

https://github.com/lefex/FE 。

<style>    .main {        display: grid;    }    div div {        background-color: red;        text-align: center;        line-height: 40px;    }</style>

<body>    <div class="main">        <div>1</div>        <div>2</div>        <div>3</div>        <div>4</div>        <div>5</div>        <div>6</div>        <div>7</div>    </div></body>

Firefox 浏览器中调试 grid 布局非常方便，在 Firefox 浏览器预览上面的代码，效果如下所示，为 7 行 1 列的表格，每个 cell 的宽度为容器的宽度，高度为 40px 。它与不使用 grid 布局的效果一样，因为它默认是 1 列：

<1>.grid container（grid 容器）：

使用 grid 布局需要通过 display 指定一个容器，这一点和 FlexBox 布局很相似，只是使用的属性值不同。grid 布局使用 grid 作为 display 属性的值，上面代码最外层 div 就是 grid 容器：

.main {    display: grid;}

<2>.grid item（grid 项）：

grid 容器中的「直接子元素」都是 grid item，上图中的 1 到 7 都是容器的 item。这里需要提醒一下，grid item 和单元格 cell 不是同一概念，一个 grid item 可能会由多个 cell 构成。下图中 item1 由 2 个 cell 构成。

<3>.grid track（grid 轨道）：

track 指的是行或者列。

<4>.单元格 cell：

行和列的交叉区域就是 cell。

<5>.网格线 line：

类似于 Excel 会存在划分网格的线，n 行有 n+1 根水平线，m 列有 m+1 根垂直线。网格可以设置名称，默认值是以数字表示。

<6>.grid area（grid 区域）：

一个 grid 区域可以放多个 item。

容器属性

1.grid-template-columns：

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

翻译：CSS 属性 grid-template-columns 的作用是定义 grid 布局列的分割线的名称和轨道的尺寸。

以我的理解它就是「显式」地设置「列宽」和分割线的名称，分割线段名称使用很少这里就不讲了，如果有实际使用场景可以补一下。可以使用多种值的方式。通过一个例子说明各个值的使用方法，假设容器的宽度为 400px，高度 200px；

<div class="main container">    <div>前端小课</div>    <div>超越技术</div>    <div>Grid布局</div>    <div>大家加油</div></div>

.main {    width: 400px;    height: 200px;    background-color: white;}.container {    display: grid;}div div {    text-align: center;    line-height: 40px;    color: white;    font-weight: bold;}div div:nth-child(1) {    background-color: #FE0000;}div div:nth-child(2) {    background-color: #F5A623;}div div:nth-child(3) {    background-color: #BD10E0;}div div:nth-child(4) {    background-color: #F04A4D;}

<1>.使用固定宽度，在 container 中设置具体的值，不同值使用空格隔开：

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

效果如下：

<2>.使用百分比，直接占满容器 40% + 60% = 100%：

.container {    grid-template-columns: 40% 60%;    display: grid;}

<3>.使用弹性单位 fr，可以按比例分配容器的大小。总共分成 3 份，第一列占 1份，第二列占 2份：

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

<4>.使用关键字 auto，它会填满容器的可用空间：

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

<5>.使用 minmax 设置长度范围，接受 2 个参数，分别表示最大值和最小值。下面设置列的最小宽度为 100px，最大宽度为 1fr。

.container {    grid-template-columns: minmax(100px, 1fr) 1fr;    display: grid;}

<6>.使用 repeat 可以表示多个值，grid-template-columns：repeat(2, 1fr) 与grid-template-columns：1fr 1fr 等价。

.container {    grid-template-columns: repeat(2, 1fr);    display: grid;}

<7>.max-content: 内容的最大宽度，min-content 内容的最小宽度。下面的例子中恰好显示单行文字的最大宽度。

.container {    grid-template-columns: repeat(2, max-content);    display: grid;}

2.grid-template-rows：

The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.

翻译：CSS 属性 grid-template-rows 的作用是定义 grid 布局行的分割线名称和轨道尺寸。

它的取值可以参考 grid-template-columns 的取值，这里不再赘述。它的主要作用是「显式」定义行高。下面定义第一行的行高为 60px，第二行的行高为容器的 20%：

.container {    grid-template-columns: 40% 60%;    grid-template-rows: 60px 20%;    display: grid;}

3.grid-gap：

grid-column-gap：列与列之间的间隙；grid-row-gap：行与行之间的间隙；grid-gap 为 grid-row-gap 和 grid-column-gap 的缩写。如果只设置一个值，表示行和列之间的间隙一样。下面设置列与列的间隙为 10px，行与行的间隙为 5px：

.container {    grid-template-columns: 40% auto;    grid-template-rows: 60px 20%;    display: grid;    grid-gap: 5px 10px;}

总结

本节介绍了 grid 布局，并介绍了容器相关的属性。可以通过固定的长度单位设置 item 的尺寸固定，也可以通过比例让 item 具有弹性。下节课程我们介绍关于 grid area 的使用。

今天的有效打卡指令：

1. 今天介绍了哪些 grid 布局相关的属性？

2. grid 相比 flexbox 布局的优点是什么？

3. 你用 grid 做过哪些事情？

推荐阅读：

第6天：深入理解 FlexBox 布局的弹性
第2天：图解 FlexBox 布局（上）
坚持学习前端的第20天

第8天：布局翘楚 - Grid 布局概述相关推荐

html布局间距,CSS Grid布局：列和间距
在上一节介绍了Grid的基础知识,在前一节的基础上介绍Grid的新特性,怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局. 可伸缩性单位网格的目的是使我们能正确的控制网格布局 ...
display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
python布局管理_Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...
CSS基本布局——grid布局
grid布局简介: Grid布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局. 基本概念: 容 ...
css【详解】grid布局—— 网格布局（栅格布局）
网格布局(Grid)是最强大的 CSS 布局方案 grid布局和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
grid布局浏览器兼容_CSS Grid 网格布局教程
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
CSS Grid 布局
什么是 Grid 布局? CSS Grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式 Grid 由水平线和垂直线构成,两条水平线中间的区域叫做行轨道,两条垂直线中间的区域叫做列轨 ...
一文搞懂Grid 布局
Grid 布局是什么? Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目 ...
超级强大的网格grid布局
超级强大的网格grid布局一.概述二.基本概念 1. 容器和项目 2.行和列 3.单元格 4.网格线三.容器属性 1. display 属性 2.grid-template-columns 属性 ...

第8天：布局翘楚 - Grid 布局概述

第8天：布局翘楚 - Grid 布局概述相关推荐

最新文章

热门文章