谈一谈CSS Grid 网格布局的实现

我们在这里要谈的是CSS Grid网格布局，在用网格布局的时候我们得先知道他的概念。“对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。”所以说网格可以把网页分为多个区域。
我们开始用网格布局的时候就得在父容器里面加上“display：grid；”，这样我们就可以在里面添加网格布局的元素。其元素就有：grid-template-columns：就是设置网格的列数，grid-template-rows：就是设置网格的行数。我们来举个例子看看。


然后在了解行和列的运用之后我们就得学习一个新的单位“fr”。fr是一个比例单位，在知道fr比例单位之后就要知道repeat这个值，repeat是用来简化操作的，我们可以把它写作grid-template-columns：repeat（4,1fr）；和grid-template-rows：repeat（3,1fr）；我们来看看效果：


注意就是再用fr的时候网格里面的元素的大小必须是相同的。
在了解行和列之后再来了解网格划分区域：划分区域就得在父容器上加上grid-template-areas:"";它里面的值就是每个区域的名字，如划分三个区域就是这样写：
grid-template-areas:
“a1 a1 a2
a1 a1 a2
a3 a3 a2”;
然后在子项中就得加入:grid-area:对应值;我们一起来看一看效果。


然后就是可以设置它们列与行之间的间距。用grid-column-gap：列的间距、grid-row-gap:行的间距。一起看看效果。


就这样我们就可以实现一些特殊的布局，就可以很简洁的对在一个容器之中不同的区域就行写不同的内容，这就是网格布局。
这就是HTML语言编程的魅力，如果想快速提升自己，让自己也成为编程高手，详情请了解逆战班。