最近在菜鸟教程看了 grid 布局的相关文档,只能说 grid 布局真是非常强大的一种 css 布局方式,我与它相见恨晚
菜鸟教程链接:https://www.runoob.com/css3/css-grid.html
使用 grid 布局,我们可以很轻松地实现如图所示的网格形式的页面布局:
上图所示 html 结构为一个 div 里包含 9 个 div,使用 grid 布局,仅需要在父元素上编写如下两行关键 css 代码便可实现这样的布局效果:
1 | display: grid; |
释义:
display: grid: 当设置 display: grid 后,添加该属性的 html 元素将变成一个网格容器,这个元素的所有直系子元素将成为网格元素
grid-template-columns: auto auto auto: 该属性用于定义网格中的行,在这个例子中,我们使用该属性在网格容器中创建了 3 个列(使用 3 个 auto)
我们还可使用 grid-template-rows 属性定义网格容器中的列
例如,当我们添加 grid-template-rows: 80px 100px 150px,就可控制网格容器中每一行的高度:(将 1-3 行的高度分别设置为 80px 100px 150px)
上述给出的例子,只是 grid 布局的冰山一角,我们还可以使用 grid-column 属性定义网格元素列的开始和结束位置,使用 grid-row 属性定义网格元素行的开始和结束位置:
如上图所示,我们使用对应的 grid 属性使第一个元素的宽度跨了两列,使第三个元素的高度跨了三行,其中 grid-column 和 grid-row 属性是在子元素中设置的,而非父元素。
这个例子的完整代码如下:
1 |
|