相信很多前端同志对弹性盒(Flex)布局很熟悉,但是对于网格(Grid)布局很陌生,甚至在项目中从来没有用到过。今天就带大家学习一下网格布局是如何玩的。
如果你懒的动手写代码,或者本地创建项目,博主贴心的为你准备了代码预览地址,你可以一边调试一边预览效果。
1. 什么是网格布局
网格是由一系列水平及垂直的线构成的一种布局模式。根据网格,我们能够将设计元素进行排列,帮助我们设计一系列具有固定位置以及宽度的元素的页面,使我们的网站页面更加统一。
一个网格通常具有许多的列(column)与行(row) ,以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽(gutter) 。
也就是下面这张图:
我们一般会根据我们的设计图来决定网格的布局长什么样子。
接下来我们从一个基础的网格系统开始学起来。
2. 自定义网格布局
布局如下:
<h1>Simple grid example</h1> <div class="container"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div>
2.1. Gird
首先,你要设置网格布局,必须把display设置为grid
。
css
.container { display: grid; }
2.2. grid-template-columns
此时的布局并没有任何变化,我们需要通过grid-template-columns
设置列的宽度,给个三列,每列200px吧。
css
.container { display: grid; grid-template-columns: 200px 200px 200px; }
此时,页面效果如下:
2.3. gap
使用 grid-column-gap(en-US) 属性来定义列间隙;使用 grid-row-gap(en-US) 来定义行间隙;使用 grid-gap(en-US) 可以同时设定两者。
修改代码:
css
.container { display: grid; grid-template-columns: 200px 200px 200px; grid-gap: 20px; ga