开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十一天,点击查看活动详情

深入解析CSS(第N天)

网格布局,另一个布局的"神"

可能很多人用flex布局用的很多,但是还有一种布局让你的快速实现以下样式

不出意外这些可能是很多web页面常常出现的一种布局,如果单独用flex可以实现这些,但是如果你学了网格布局模块,那么你就会发现这些是有如此简单的实现.

了解Grid布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

flex布局和grid布局的区别

首先要明白,flex布局是一维布局,grid布局是二维布局,所谓的一维就是一行或一列,而gird能同时操控行和列

简单的实例

看到这个代码或许就能很快发现,我们只需三行代码就将6块元素自动换分成2行三列,如果使用flex的话可能不止六行代码

grid属性(重要)

grid-template-columns 属性和 grid-template-rows 属性

这个二个属性应该是最为核心的两个属性,一个是控制行,一个是控制列,它能实现固定的列宽和行高,也能设置自动填充,均等划分,从而让我们在做设备适配时省下大量时间

固定的列宽和行高

.wrapper {
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            /*  声明列的宽度  */
            grid-template-columns: 100px 200px 300px;
            /*  声明行间距和列间距  */
            grid-gap: 20px;
            /*  声明行的高度  */
            grid-template-rows: 300px 100px;
}

以上表示固定列宽为 100px 200px 300px，行高为 300px 100px

grid还提供一个repeat函数,可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

自动填充

grid提供auto-fill关键字能让一行（或者一列）中尽可能的容纳更多的单元格

特殊单位

grid网格提供了一个提示的单位fr,fr 单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3,这样我们就可以去均分单位,有时我们可以使用repeat来均分一行的数据或者一列的数据

auto

auto其实和flex的auto类似,也就是自动分配宽度,根据一行中还剩多少会自动填充完