本日这篇文章我们通过图文,一起看看如何自己实现Grid布局办法。

CSS

第一个Grid布局

首先我们看看最基本的Grid布局是什么样的,HTML页面的代码如下所示。

htmlcss布局图文详解CSS中的Grid结构你真的可以5分钟控制 Python

HTML代码

然后设置其CSS属性,这里紧张展示容器的CSS属性,给子元素添加的color属性就不在这里展示了。

CSS属性

在页面上看到的效果如下,目前由于没有对子div元素做任何设置,会自动将子div沿垂直方向排列。

页面效果

设置行和列

为了让外层的div(wrapper)为一个网格容器,须要设置其行数和列数,就像一个表格一样。

此时就须要用到grid-template-columns和grid-template-rows两个属性值。

grid-template-columns

用于设置网格容器的列属性,实在就相称于列的宽度。
当我们须要几列展示时,就设置几个值,这个属性可以吸收详细数值比如100px,也可以吸收百分比值,表示霸占容器的宽度。

须要把稳的是:当给容器设定了宽度时,grid-template-columns设定的百分比值因此容器的宽度值为根本打算的。
如果未设置宽度时,会一贯向上追溯到设置了宽度的父容器,直到body元素。

比如我们设置了以下的CSS属性。

CSS属性

可以看出三列宽度加起来的百分比值为120%,而且wrapper容器并未设置宽度,会一贯向上追溯到body元素,这样三列的总宽度已经超过了body的宽度,因此会涌现滚动条。

页面效果

grid-template-rows

用于设置网格容器的行属性,实在就相称于行的高度,其特性与grid-template-columns属性类似。

下面大略修正grid-template-columns和grid-template-rows两个属性的值。

CSS值

得到的效果图如下所示。

效果图

放置子元素

接下来我们看看别的情形,通过CSS属性设置33的网格。

CSS属性

在页面上的呈现办法如下所示。

页面呈现

从页面上看我们看不出有什么问题,但是打开掌握台后可以创造,这个网格已经霸占了33的空间。
它后面的元素只能排列在所有的网格后面。

页面实际情形

不规则排列

当我们须要得到分外的排列办法,比如占满整行,占满整列,二三行合并等等。

这就须要用到grid-column和grid-row属性,表示行网线和列网线的序号。
通过设置start和end值,来进行网格的合并。

网线序号

我们重新给wrapper容器内部的div添加class类。

HTML代码

然后添加以下的CSS代码,给不同的网格特定的行号和列号。

CSS代码

终极得到的效果图如下所示。

页面效果图

结束语

本日这篇文章先容了CSS中Grid布局的根本知识,该当可以很快节制,其他的繁芜点的网格布局大家也可以自己去考试测验。