Grid布局 - 技术栈

网格编排

display: grid

将容器变为网格容器

:::tips

网格容器中的子元素（网格项）自动变为块盒

:::

grid-template-columns / grid-template-rows

设置网格每列的宽度、每行的高度

repeat函数

用于简化多行或多列的尺寸定义,repeat(次数，数值)

justify-content

控制横向单元格的对齐方式

align-content

控制纵向单元格的对齐方式

gap

控制单元格之间的间距

:::tips 该属性是row-gap和column-gap的速写

:::

综上案例1:

实现一个grid容器，其中有九个方格，居中对齐，间距是10px

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        width: 50%;
        height: 500px;
        background-color: bisque;
        display: grid;
        /* grid-template-columns: 100px 100px 100px; */
        /* 利用repeat函数简写 */
        grid-template-columns: repeat(3, 100px);
        /* grid-template-rows: 100px 100px 100px; */
        grid-template-rows: repeat(3, 100px);
        /* row-gap: 10px; */
        /* column-gap: 10px; */
        /* 利用gap简写 */
        gap: 10px;
        justify-content: center;
        align-content: center;
      }

      .container .item {
        width: 100%;
        height: 100%;
        border: 1px solid black;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

grid-auto-rows

控制隐式网格的行高

隐式网格：假如设置了grid-template-column和grid-template-rows的2*2的网格，第五个以后得网格都称之为隐式网格。

grid-auto-columns

控制隐式网格的列宽

minmax函数

用于产生一个尺寸区间，

minmax(100px, 1fr) 100px<宽度<1fr

综上案例2：

显式33单元格尺寸是100px100px，隐式单元格最小高度50px，最大高度根据内容撑开，整体水平垂直居中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        width: 50%;
        height: 100%;
        background-color: bisque;
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr));
        grid-template-rows: repeat(3, 100px);
        gap: 10px;
        justify-content: center;
        align-content: center;
        grid-auto-rows: 30px;
        grid-auto-rows: minmax(50px, auto);
      }

      .container .item {
        width: 100%;
        height: 100%;
        border: 1px solid black;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10 隐式单元格</div>
      <div class="item">11 隐式单元格</div>
      <div class="item">12 隐式单元格</div>
      <div class="item">13 隐式单元格</div>
      <div class="item">14 隐式单元格</div>
      <div class="item">隐式单元格asdas dasda sdsadas dasds adadsad asdasda</div>
    </div>
  </body>
</html>

auto-fill关键字

用于得到一个尽可能多的网格数量

auto-fit关键字

用于得到一个尽可能刚好容纳所有网格项的网格数量

auto-fill和auto-fit区别

在多行上的排布看不出差异，只有在单行且还有剩余空间上存在差异

auto-fill 尽可能规划更多的列利用好200px 会产生剩余空间
auto-fit 尽可能让子元素沾满一行利于用好1fr 不会产生剩余空间

css 复制代码

.container {
  width: 80%;
  height: 100%;
  background-color: bisque;
  display: grid;
  /* auto-fill 尽可能规划更多的列 利用好200px 会产生剩余空间 */
  /* auto-fit 尽可能让子元素沾满一行 利于用好1fr 不会产生剩余空间 */
  /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /* 单行两者会有区别，多行基本没区别 */

  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  grid-auto-rows: minmax(50px, auto);
}

auto-fill的表现，子元素最多100px宽度，尽可能多的在一行内规划区域

auto-fit的表现如下，子元素可以利用好1fr撑满一行的宽度。

综上案例3：

实现每行单元格随着容器宽度大小自动展开

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        width: 80%;
        height: 100%;
        background-color: bisque;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: repeat(3, 100px);
        gap: 10px;
        grid-auto-rows: minmax(50px, auto);
      }

      .container .item {
        width: 100%;
        height: 100%;
        border: 1px solid black;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
    </div>
  </body>
</html>

子项放置

grid-column

用于控制子项跨越的列的网格线

:::tips

该属性是grid-column-start和grid-column-end的速写

:::

grid-row

用于控制子项跨越的行的网格线

:::tips

该属性是grid-row-start和grid-row-end的速写

:::

grid-area

:::tips

该属性是grid-column和grid-row的速写

:::

综上案例4

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        display: grid;
        height: 90vh;
        background-color: lightcoral;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 30px 30px 1fr;
        gap: 10px;
      }

      .item {
        border: 1px solid black;
        background-color: lightcyan;
      }
      .main {
        /* grid-row: 3/4;
        grid-column: 2/3; */

        grid-area: 3/2/4/3;
      }
      .header {
        /* grid-row: 1/2;
        grid-column: 1/3; */
        grid-area: 1/1/2/3;
      }
      .aside {
        /* grid-row: 2/4;
        grid-column: 1/2; */
        grid-area: 2/1/4/2;
      }
      .tab {
        /* grid-row: 2/3;
        grid-column: 2/3; */
        grid-area: 2/2/3/3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item main">main</div>
      <div class="item header">header</div>
      <div class="item aside">aside</div>
      <div class="item tab">tab</div>
    </div>
  </body>
</html>

grid-template-areas

用于对单元格命名

综上案例4：grid-template-areas实现方案

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        display: grid;
        height: 90vh;
        background-color: lightcoral;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 30px 30px 1fr;
        gap: 10px;

        grid-template-areas:
          'header header'
          'aside tab'
          'aside main';
      }

      .item {
        border: 1px solid black;
        background-color: lightcyan;
      }
      .main {
        /* grid-row: 3/4;
        grid-column: 2/3; */

        /* grid-area: 3/2/4/3; */
        grid-area: main;
      }
      .header {
        /* grid-row: 1/2;
        grid-column: 1/3; */
        /* grid-area: 1/1/2/3; */
        grid-area: header;
      }
      .aside {
        /* grid-row: 2/4;
        grid-column: 1/2; */
        /* grid-area: 2/1/4/2; */
        grid-area: aside;
      }
      .tab {
        /* grid-row: 2/3;
        grid-column: 2/3; */
        /* grid-area: 2/2/3/3; */
        grid-area: tab;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item main">main</div>
      <div class="item header">header</div>
      <div class="item aside">aside</div>
      <div class="item tab">tab</div>
    </div>
  </body>
</html>

grid-template

:::tips

该属性是grid-template-areas、grid-template-columns、grid-template-rows的速写

:::

grid-auto-flow

用于控制子项的放置顺序，row(默认)|column|dense

dense关键字

指定该关键字后会使用紧凑方式排列网格项，用于填补之前的空格

order

指定排列顺序

综上案例5：

实现下图的紧凑排布，并且利用order调整子元素的顺序

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        height: 90vh;
        background-color: lightcoral;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 80px;
        /* 紧凑模式 */
        grid-auto-flow: dense;
        gap: 10px;
      }

      .item {
        border: 1px solid black;
        background-color: lightcyan;
        height: 100%;
      }

      .item:nth-child(-n + 3) {
        grid-column: span 2;
        background-color: lightslategray;
      }
      .first {
        order: -2;
      }
      .second {
        order: -1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item second">1</div>
      <div class="item first">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
    </div>
  </body>
</html>

justify-items/justify-self

同一或单独设置单元格内的横向对齐方式，当单元格的元素不能撑满单元格时能看出效果

align-items/align-self

统一或单独设置单元格内的纵向对齐方式，当单元格的元素不能撑满单元格时能看出效果

place-items/place-self

统一或单独设置单元格内的横向和纵向对齐方式

:::tips

*place-items是justify-items和align-items的速写

place-self是justify-self和align-self的速写*

:::

综合案例6：

两栏，左侧单元格内子元素，靠有，垂直居中；右侧子元素靠左，垂直居中Ï