Grid 布局是什么

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

grid和flex对比

  • flex是一维布局，只能处理行布局或者列布局
  • grid是二维布局，能同时控制行和列

flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在与这些行和列相关的位置上，从而达到布局的目的。
flex布局示例
image.png
grid布局示例
image.png
grid布局和flex类型，也是分为容器和子元素

容器属性设置

设置容器属性，让该元素内符合gird布局

  1. display: grid; // 元素设置为块元素
  2. display: inline-grid; // 元素设置为行元素
  3. grid-template-columns //设置列宽
  4. grid-template-rows //设置行高

容器属性介绍

display 属性

  • display:grid 容器设置为块元素

  • display:inline-grid 容器设置为行内元素

    设置wrapper的属性display:grid

    image.png

    设置wrapper的属性display:inline-grid

    image.png

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

  • grid-template-rows设置行高

  • grid-template-columns设置列宽

这两个属性在 Grid 布局中尤为重要，它们的值是又多种多样，而且它们的设置是比较相似的，下面针对 grid-template-columns 属性进行讲解。

固定的列宽和行高

  1. .wrapper {
  2.   display: grid;
  3.   /*  声明了三列，宽度分别为 200px 100px 200px */
  4.   grid-template-columns: 200px 100px 200px;
  5.   grid-gap: 5px;
  6.   /*  声明了两行，行高分别为 20px 50px  */
  7.   grid-template-rows: 20px 50px;
  8. }

image.png

repeat() 函数

可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
如果3列的宽度都是200px，可以设置为

  1. grid-template-columns: repeat(3, 200px);

auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

  1. grid-template-columns: repeat(auto-fill, 200px);

image.png
表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置进可能多的列元素

fr 关键字

Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。

  1. grid-template-columns: 200px 1fr 2fr;

第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。image.png

minmax()

给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。接受两个参数，分别为最小值和最大值。

  1. grid-template-columns: 1fr 1fr minmax(300px, 2fr)

第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

auto关键字，实现左右固定，中间自适应

由浏览器决定长度。可以轻松实现左右固定，中间自适应布局。

  1. grid-template-columns: 100px auto 100px

表示第一第三列为 100px，中间由浏览器决定长度。

grid-row-gap、grid-columns-gap、grid-grap属性

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。
grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样
image.png

grid-template-areas属性

定义的网格区域。https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-areas

  1. grid-template-areas: 
  2.             "a a a"
  3.             "b c c"
  4.             "b c c";

image.png

  1. grid-template-areas: 
  2.             "b b a"
  3.             "b b c"
  4.             "b b c";

image.png

  1. grid-template-areas: 
  2.             "a a ."
  3.             "a a ."
  4.             ". b c";

image.png

grid-auto-flow 属性

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行
顺序由 grid-auto-flow 属性决定，默认值是 row

  1. .wrapper {
  2.   display: grid;
  3.   grid-template-columns: 100px 200px 100px;
  4.   grid-auto-flow: row;
  5.   grid-gap: 5px;
  6.   grid-auto-rows: 50px;
  7. }

image.png
还可以设置dense属性，表示尽可能填满表格

  1. .wrapper {
  2.   display: grid;
  3.   grid-template-columns: 100px 200px 100px;
  4.   grid-auto-flow: row dense;
  5.   grid-gap: 5px;
  6.   grid-auto-rows: 50px;
  7. }

image.png
还可以设置grid-auto-flow: column;

  1. .wrapper {
  2.     margin: 60px;
  3.     display: grid;
  4.     grid-template-columns: 100px auto 100px;
  5.     grid-gap: 10px 20px;
  6.     grid-template-rows: 30px 60px 90px;
  7.     grid-auto-flow: column;
  8. }

image.png

justify-items 属性、align-items 属性以及 place-items 属性

  • justify-items：设置单元格内容的水平位置（左中右）
  • align-item: 属性设置单元格的垂直位置（上中下）

justify-item:start; 对齐单元格的起始边缘
image.png
justify-item: end; 对齐单元格的结束边缘
image.png
justify-item: center; 单元格内部居中
image.png
justify-item: stretch; 拉伸，占满单元格的整个宽度（默认值）
image.png

justify-content 属性、align-content 属性以及 place-content 属性

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

以 justify-content 属性为例进行讲解

  • start - 对齐容器的起始边框
  • end - 对齐容器的结束边框
  • center - 容器内部居中

image.png

  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。比较常用
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器

image.png
image.png

grid-auto-columns 属性和 grid-auto-rows 属性

当元素过多时，设置的网格属性不够，会使用到这两个属性。使用和grid-template-columns/rows一样。

项目属性

grid-column-start 、grid-column-end 、grid-row-start 以及grid-row-end

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

  • grid-column-start 属性：左边框所在的垂直网格线
  • grid-column-end 属性：右边框所在的垂直网格线
  • grid-row-start 属性：上边框所在的水平网格线
  • grid-row-end 属性：下边框所在的水平网格线

image.png
类 .two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。可以设置 z-index 去处理的层级关系

  1. .wrapper {
  2.   display: grid;
  3.   grid-template-columns: repeat(3, 1fr);
  4.   grid-gap: 20px;
  5.   grid-auto-rows: minmax(100px, auto);
  6. }
  7. .one {
  8.   grid-column-start: 1;
  9.   grid-column-end: 2;
  10.   background: #19CAAD;
  11. }
  12. .two { 
  13.   grid-column-start: 2;
  14.   grid-column-end: 4;
  15.   grid-row-start: 1;
  16.   grid-row-end: 2;
  17.   /*   如果有重叠，就使用 z-index */
  18.   z-index: 1;
  19.   background: #8CC7B5;
  20. }
  21. .three {
  22.   grid-column-start: 3;
  23.   grid-column-end: 4;
  24.   grid-row-start: 1;
  25.   grid-row-end: 4;
  26.   background: #D1BA74;
  27. }
  28. .four {
  29.   grid-column-start: 1;
  30.   grid-column-end: 2;
  31.   grid-row-start: 2;
  32.   grid-row-end: 5;
  33.   background: #BEE7E9;
  34. }
  35. .five {
  36.   grid-column-start: 2;
  37.   grid-column-end: 2;
  38.   grid-row-start: 2;
  39.   grid-row-end: 5;
  40.   background: #E6CEAC;
  41. }

justify-self 属性、align-self 属性以及 place-self 属性

  • justify-self 属性设置单元格内容的水平位置（左中右），和justify-item一样，只能设置单个项目属性
  • align-self 属性设置单元格内容的垂直位置（上中下），和align-item一样，只能设置单个项目属性

    grid-column-start设置项目跨度

    span 关键字进行设置网格项目的跨度
    1. .six{
    2. grid-column-start: span 2; //表示这个网格项目跨度为 2
    3. }
    image.png

    Grid 实战——实现响应式布局

    fr 实现等分响应式

    fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。
    grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

    repeat + auto-fit——固定列宽，改变列数量

    网格能够固定列宽，并根据容器的宽度来改变列的数量。
    可以使用上面提到 repeat() 函数以及 auto-fit 关键字。
    grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列。
    1. .wrapper {
    2. margin: 50px;
    3. display: grid;
    4. grid-template-columns: repeat(auto-fit, 200px);
    5. grid-gap: 10px 20px;
    6. grid-auto-rows: 50px;
    7. }

    repeat+auto-fit+minmax 去掉右侧空白

    上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。
    将 grid-template-columns: repeat(auto-fit, 200px) 改成
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则等分。
    1. .wrapper {
    2. margin: 50px;
    3. display: grid;
    4. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    5. grid-gap: 10px 20px;
    6. grid-auto-rows: 50px;
    7. }

    repeat+auto-fit+minmax-span-dense 跨多个项目并解决空缺问题

    每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。
    1. .item-3 {
    2. grid-column-start: span 3;
    3. }
    image.png
    怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 dense 关键字出场了。grid-auto-flow: row dense 表示尽可能填充，而不留空白。 ```css .wrapper, .wrapper-1 { margin: 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px 20px; grid-auto-rows: 50px; }

.wrapper-1 { grid-auto-flow: row dense; } ```

在线学习：https://scrimba.com/learn/cssgrid/your-first-grid-css-grid-tutorial-cMQgGca

https://zhuanlan.zhihu.com/p/256353171