CSS网格布局

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！# 系列文章目录
前端系列文章——传送门
CSS系列文章——传送门

---

---

网格布局

什么是网格布局？

Grid 布局是CSS中最强大的布局系统。
与 flexbox 的一维布局系统不同，Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。
通过将 CSS 规则应用于父元素 (网格容器)和其子元素（ 网格项），你就可以轻松使用 Grid(网格) 布局。

它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法遗漏了很多重要的功能（例如垂直居中）。
Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。

基本概念

必须使用 display: grid 指定一个容器为网格布局，
必须使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小

行 和 列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

单元格

行和列的交叉区域，称为"单元格"（cell）
正常情况下，n行和m列会产生n x m个单元格。比如，5行5列会产生25个单元格

网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线

基本配置项

给父元素添加

1. display:grid/inline-grid
   注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

2. grid-template-columns / grid-template-rows
   定义每一列（columns）、每一行（rows）的大小

eg: {
    display: grid;
    grid-template-columns: 100px 200px 300px;
    grid-template-rows: 300px 200px 100px;
}

显示效果为 三列三行的网格布局，
列宽分别为 100px 200px 300px;
行高分别为 300px 200px 100px;

eg: {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);;
    grid-template-rows: repeat(3, 33.33%);
}

repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时
这时，可以使用repeat()函数，简化重复的值
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
repeat()重复某种模式也是可以的（）
fr关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
fr可以与绝对长度的单位结合使用

eg: {
    display: grid;
    grid-template-columns: 150px 1fr 2fr;
}

3. grid-column-gap / grid-row-gap / grid-gap: 行间距 列间距 设置间距大小
   根据最新标准，上面三个属性名的grid-前缀已经删除，
   grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

4. grid-auto-flow : row column 排列方式
   划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格
   默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
   也可以将它设成column，变成"先列后行"，还有 row dense 和 column dense

5. justify-content和align-content place-content：align-content和justify-content属性的缩写

   • justify-content
     整个内容区域在容器里面的水平位置（左中右）
   • align-content
     整个内容区域的垂直位置（上中下）

给子元素添加

• grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
  grid-area: 行开始 列开始 行结束 列结束

  grid-area: 2 / 1 / span 2 / span 3; 从第2行第1列开始，并跨越2行3列
  2 垂直方向上坐标
  1 水平方向上坐标

  sapn 2 垂直方向上的合并之后的大小
  sapn 3 水平方向上的合并之后的大小

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog