什么是网格布局

定义一个网格

grid-template-columns与grid-template-rows 属性

fr单位

使用grid-template-areas属性放置元素

什么是网格布局

首先，网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

简单来说就是把界面分成不同块，不同块填充不同的内容。

网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

定义一个网格

首先，我们通过在display属性中设置为grid定义成一个网络。

.container {
    display: grid;
}

    <div class="container">
        <div>今天你学习了吗？</div>
        <div>今天你吃饭了吗？</div>
        <div>今天你睡觉了吗？</div>
    </div>

与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为display: grid的声明只创建了一个只有一行的网格，所以我们的子项还是会像正常布局流那样从上而下一个接一个的排布。

为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。我们先加三个宽度为200px的列。

注意：在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

如图我们就生成了3个200px的列：

grid-template-columns与grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

我们从上述例子可以看到grid-template-columns 可以控制列个数与列宽。列的数量是不固定的，只要浏览器能够容纳得下就行。

fr单位

除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例。

使用下面的规则来创建 3 个1fr的列：

.container {
     display:grid;
     grid-template-columns: 1fr 1fr 1fr;
}

如图这就将一行均匀分成了3份，形成了三个比例都为1fr的网格。这个也类似于设置flex盒子设置flex：1，同样是按照相同比例。

fr 单位按比例划分了可用空间，如果没有理解，可以试着改一下数值，看看会发生什么，比如下面的代码：

.container {
     display:grid;
     grid-template-columns: 300px 2fr 1fr;
}

这个定义里，第一列被分配了300px可用空间，余下的两列分别分配了除去300px后的空间按照比列2fr与1fr来分配，这会使得第二列的宽度是第三列的两倍。

minmax

在这里还需要提一下minmax，该函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。第一个参数就是最小值，第二个参数就是最大值。比如：

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

网格间隙

我们可以使用 grid-column-gap属性来定义列间隙；使用grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 10px;
}

如图我们在图中看到了10px的网格间隙，如果只采用grid-column-gap，则是列之间生成间隙，采用grid-row-gap则是行之间生成间隙。

重复构建行/列

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

和之前一样，我们得到了 3 个1fr的列。第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如repeat(3, 1fr 2fr)，如果你仍然不明白，可以实际测试一下效果，这相当于填入了1fr 2fr 1fr 2fr 1fr 2fr。

作用在grid上的属性

属性	含义
grid-column-start	水平方向的起始位置
grid-column-end	水平方向的结束位置
grid-row-start	垂直方向的起始位置
grid-row-end	垂直方向的结束位置
grid-column	grid-column-start与grid-column-end的缩写
grid-row	grid-row-start与grid-row-end的缩写
grid-area	当前网格所占用的区域，名字和位置两种表示方法
justify-self	单个单元元素水平对齐方式
align-self	单个单元元素垂直对齐方式
place-self	justify-self和align-self的缩写

grid-column与grid-row

首先我们先来学习grid-column如何使用，使用一个数字时，就可以比如：grid-column:2;则表示第二列。若想多列，grid-column: 1 / 3;表示从第一列至第三列，缩写的形式则是开始与结束位置之间由 / 来分隔，不缩写的形式为 grid-column-start:1;grid-column-end:3;

同理，grid-row:1；表示第一行，grid-row:1/3表示第一行至第三行。

基于以上方式，我们可以通过设置grid-row与grid-column将不同元素放置于对应位置，比如某个元素设置grid-column:2;grid-row:2则表示将元素放在第二行第二列的位置。例子：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Grid</title>
    <style>
    
      body {
        width: 90%;
        max-width: 900px;
        margin: 2em auto;
        font: 0.9em/1.2 Arial, Helvetica, sans-serif;
      }
      .container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
      }
      header,
      footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(209, 207, 232);
        border: 2px solid rgb(15, 15, 15);
      }
      aside {
        border-right: 1px solid #999;
      }
      header {
        grid-column: 1 / 3;
        grid-row: 1;
    }
        article {
        grid-column: 2;
        grid-row: 2;
        }

        aside {
        grid-column: 1;
        grid-row: 2;
        }

        footer {
        grid-column: 1 / 3;
        grid-row: 3;
        }

    </style>
  </head>

  <body>
    <div class="container">
      <header>这里是齐白在学习</header>
      <article>
        <h1>吾日三省吾身</h1>
        <p>
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
        </p>

        <p>
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
            今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？
        </p>
      </article>
      <aside>
        <h2>回答</h2>
        <p>
            好好吃了，好好睡了，但是没好好学>_<
                好好吃了，好好睡了，但是没好好学>_<
                    好好吃了，好好睡了，但是没好好学>_<
        </p>
      </aside>
      <footer>继续加油</footer>
    </div>
  </body>
</html>

使用grid-template-areas属性放置元素

另一种往网格放元素的方式是用grid-template-areas属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。我们将上述部分代码改为以下形式：

.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

grid-template-areas属性的使用规则如下：

你需要填满网格的每个格子
对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字
所有名字只能出现在一个连续的区域，不能在不同的位置出现
一个连续的区域必须是一个矩形
使用.符号，让一个格子留空

以上内容如有错误，请大家在评论区指正，谢谢支持，共同进步。加油！！！
如果你感觉我写的内容对你有一定的帮助，请给我点一个【赞】作为您对我的鼓励，感谢！！

CSS网格

什么是网格布局

定义一个网格

grid-template-columns与grid-template-rows 属性

fr单位

minmax

网格间隙

作用在grid上的属性

grid-column与grid-row

使用grid-template-areas属性放置元素

猜你喜欢