CSS中Grid布局的属性认识

1.grid 布局

grid是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴。

2. 基本概念

设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。

grid line：网格线，构成 grid 布局的结构，分为水平和竖直两种。

grid track：两条相邻网格线之间的空间，可以认为是一行或者一列。

grid cell：两条相邻行和相邻列之间分割线组成的空间，是 grid 布局中的一个单元。

grid area：四条网格线包裹的全部空间，任意数量的 grid cell 组成一个 grid area。

3. 容器属性

grid-template 系列
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap 系列
grid-column-gap
grid-row-gap
place-items 系列
justify-items
align-items
place-content 系列
justify-content
align-content
grid 系列
grid-auto-columns
grid-auto-rows
grid-auto-flow

4.示例1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建grid容器</title>
    <style>
      .container {
        /* 容器大小 */
        width: 400px;
        height: 400px;
        background-color: wheat;
        /* 创建grid容器 */
        display: grid;
        /* 设置项目在网格中的填充方案, 默认行优先 */
        grid-auto-flow: row;
        /* grid-auto-flow: column; */
        /* 显式地划分行与列, 三列二行 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;
        /* 对于放置不下的项目,会隐式生成单元格 */
        grid-auto-rows: auto;
        grid-auto-rows: 150px;
      }
      .item {
        background-color: lightblue;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
    </div>
  </body>
</html>

示例2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置单元格的数量与大小</title>
    <style>
      .container {
        /* 容器大小 */
        width: 400px;
        height: 400px;
        background-color: wheat;
        /* 创建grid容器 */
        display: grid;
        /* 固定值 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        /* 百分比 */
        grid-template-columns: 20% 30% auto;
        grid-template-rows: 100px auto 100px;
        /* 比例 */
        grid-template-columns: 1fr 2fr 2fr;
        grid-template-rows: 1fr auto 2fr;
        /* 重复设置 */
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        /* 按分组来设置: (50px-100px) */
        /* 50px 100px 50px 100px */
        grid-template-columns: repeat(2, 50px 100px);
        /* 弹性 */
        grid-template-columns: repeat(2, minmax(50px, 100px));
        grid-template-rows: repeat(3, minmax(150px, 1fr));
        /* 自动填充 */
        grid-template-columns: repeat(auto-fill, 100px);
        grid-template-rows: repeat(auto-fill, 100px);
      }
      .item {
        background-color: lightblue;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
    </div>
  </body>
</html>

示例3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用默认的网格线来划分单元格</title>
    <style>
      .container {
        /* 容器大小 */
        width: 400px;
        height: 400px;
        background-color: wheat;
        /* 创建grid容器 */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
      }
      .item {
        font-size: 2rem;
      }
      .item.item1 {
        background-color: lightgreen;
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        /* grid-row-start: -1;
        grid-row-end: -3;
        grid-column-start: -1;
        grid-column-end: -3; */
        /* grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: -1; */
      }
      /* 简写 */
      .item.item2 {
        background-color: lightpink;
        /* grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 3;
        grid-column-end: 5; */
        grid-row: 1 / 3;
        grid-column: 3 / 5;
      }
      /* 使用偏移量来简化, 将第三个移动到左下角 */
      .item.item3 {
        background-color: yellow;
        /*grid-row-start: 3;
        grid-row-end: span 2;
        grid-column-start: 1;
        grid-column-end: span 2; */
        grid-row: 3 / span 2;
        grid-column: 1 / span 2;
      }
      .item.item4 {
        background-color: lightgrey;
        /* grid-row-start: 3; */
        grid-row-end: span 2;
        /* grid-column-start: 3; */
        grid-column-end: span 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
  </body>
</html>

5.总结

Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但属性是真的很多。我是有点记不过来了。还是需要多多加强练习啊。

1.grid 布局

2. 基本概念

3. 容器属性

4.示例1

5.总结

相关文章