CSS-Grid布局🔥

小杨 2023/11/3 Css

# Flex与Grid

Flex布局是一维的排版方式，也就是说一次只能控制一个方向（水平方向或者垂直方向），如果需要控制另一个方向需要再添加一层flexbox容器。
Grid布局是二维的排版方式，一次能控制两个方向，通过将容器分成行和列，便可定义容器内元素的位置。

# 基本概念

行与列的概念（row & column）

水平区域——行
垂直区域——列 单元格（cell）
行和列交叉的区域就为一个单元格
正常情况下，n行和m列产生mn个单元格->5行5列=55=25个单元格 网格线（grid line）
网格线（grid line）
水平网格线划分出行，垂直网格线划分出列
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线

# 使用Grid布局

首先需要准备一个容器元素：<div class="container"></div>
然后设定容器的display：grid即可:

.container { display: grid; width: 500px; height: 500px; background-color: #eee; border: 1px solid rgb(0, 0, 0); }

❕注：Grid布局分为display：grid与display: inline-grid，grid下容器元素都是块级元素，而inline-grid则是行内元素。

# 行高与列宽（grid-template-rows/columns）

grid-template-rows属性：定义每一行的行高
grid-template-columns属性：定义每一列的列宽

比如，下面将grid-template-rows与grid-template-columns都设定为5个100px，中间用空格隔开，grid-template-rows代表垂直方向分割出5个高度为100px的空间，grid-template-columns代表水平方向分割出5个高度为100px的空间。

      .container {
        display: grid;
        grid-template-rows: 100px 100px 100px 100px 100px;
        grid-template-columns: 100px 100px 100px 100px 100px;
        width: 500px;
        height: 500px;
        border: 1px solid rgb(0, 0, 0);
        background-color: #eee;
      }

repeat()函数

如果觉得定义行高（grid-template-rows）以及列宽（grid-template-columns）的时候重复书写某个值很麻烦，那么就可以考虑使用repeat()函数

语法： repeat(<length>, [<value> | <mode>])

参数1length：需要重复的次数
参数2[<value> | <mode>]：需要重复的值，可以是百分比、具体的值或者是某种模式

比如上面的定义行高与列宽中的代码就可以改写为下面这样

     .container {
        display: grid;
        grid-template-rows: repeat(5, 100px);
        grid-template-columns: repeat(5, 100px);
        width: 500px;
        height: 500px;
        border: 1px solid rgb(0, 0, 0);
        background-color: #eee;
      }

repeat()可以和正常的设定值混用

grid-template-rows: 100px repeat(2, 100px 100px);

fr 关键字

如果想按照比例分配行高（grid-template-rows）以及列宽（grid-template-columns）的值，那么就可以使用fr关键字（Fraction，意为"片段"）
fr表示比例，1fr表示占1份
如果将上面的grid-template-rows: repeat(5, 100px)改为grid-template-rows: repeat(5, 1fr)，即表示即各占5分之1的空间
fr关键字同样可以和正常的设定值混用,grid-template-rows: 1fr repeat(2, 1fr 1fr);

auto-fill关键字

有时，单元格的大小是固定的，但是容器的大小不确定。

如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

grid-template-columns: repeat(auto-fill, 100px);

上面代码表示每列宽度100px，然后根据容器的宽度自动填充，直到容器不能放置更多的列。

HTML：

<div class="container">
  <div class="number cell1">1</div>
  <div class="number cell2">2</div>
  <div class="number cell3">3</div>
  <div class="number cell4">4</div>
  <div class="number cell5">5</div>
  <div class="number cell6">6</div>
  <div class="number cell7">7</div>
  <div class="number cell8">8</div>
  <div class="number cell9">9</div>
</div>

CSS：

  .container {
    display: grid;
    width: 500px;
    height: 500px;
    background-color: #eee;
    border: 1px solid rgb(0, 0, 0);
    grid-template-rows: repeat(5, 100px);
    grid-template-columns: repeat(auto-fill, 200px);
  }

  .cell1 {
    background-color: blue;
  }

  .cell2 {
    background-color: yellow;
  }

  .cell3 {
    background-color: orange;
  }

  .cell4 {
    background-color: black;
    color: white;
  }

  .cell5 {
    background-color: #c077af;
  }

  .cell6 {
    background-color: #f8d29d;
  }

  .cell7 {
    background-color: #b4a87f;
  }

  .cell8 {
    background-color: #d0e4a8;
  }

  .cell9 {
    background-color: #4dc7ec;
  }

auto关键字

auto关键字可以让浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

上面的意思是，第二列的宽度，等于该列单元格的最大宽度。

行间距与列间距（grid-row/column-gap）

如果觉得所有元素紧贴在一起不太好，Grid布局还提供了grid-row-gap与grid-column-gap来增加元素间的行间距与列间距

grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap属性设置列与列的间隔（列间距）

grid-auto-flow 关键字

Grid布局提供了grid-auto-flow用于控制容器内元素的排列方向（类似Flex布局中的flex-direction+flex-warp:warp的效果）

默认值为row，默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。

设置为column时，表示"先列后行"，即先填满第一列，再开始放入第二列，具体参考下图数字的排列顺序

# 设置单元格中的元素/内容的位置

justify-items与align-items

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

可选值：

start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）

  .number {
    display: grid;
    justify-items: start;
    align-items: start;
    box-sizing: content-box;
    border: 1px solid rgb(117, 117, 117);
    border-radius: 5px;
    box-shadow: 0px 5px 3px #000;
    font-size: 35px;
    font-weight: 800;
}

效果

我的博客

Choose mode

CSS-Grid布局🔥

CSS-Grid布局🔥

# Flex与Grid

# 基本概念

# 使用Grid布局

# 行高与列宽（grid-template-rows/columns）

# 设置单元格中的元素/内容的位置