原来哔哩哔哩首页用到了Grid布局！

1. 认识 Grid 布局

Grid 布局是 CSS 中的二维布局系统，可以同时控制行和列的排列方式，非常适合构建复杂网页结构。它的核心逻辑是把父容器划分为网格，子元素按需填充到指定区域。

例如哔哩哔哩网站首页就是用了 Grid 布局：

与 Flex 布局的区别：

Flex是一维布局（横向或纵向排列）
Grid是二维布局（同时控制行和列）
Grid更适合表格类、卡片墙等需要严格对齐的场景

2.基础用法

1.创建网格容器和子元素

css 复制代码

<div class="container">
  <div class="item item1">公</div>
    <div class="item">众</div>
    <div class="item">号</div>
    <div class="item">知</div>
    <div class="item">否</div>
    <div class="item">技</div>
    <div class="item">术</div>
    <div class="item">6</div>
    <div class="item">6</div>
    <div class="item">6</div>
</div>

css

css 复制代码

    .container {
      background-color: rgb(191, 238, 222);
      padding: 20px;
      /* 启用Grid布局 */
      display: grid;
      /* 定义5列：前4列固定宽度，最后一列自适应宽度 */
      grid-template-columns: 100px 150px 200px 300px 1fr;
      /* 定义两行高度 */
      grid-template-rows: 100px 200px;
      /* 统一设置行列间距 */
      gap: 10px;
    }

    .container .item {
      background-color: rebeccapurple;
      font-size: 30px;
      color: white;
    }

演示效果：

解答：

display: grid; 表示启用 Grid 布局
grid-template-columns 表示设置列宽度，fr 表示按照比例分配剩余空间。
grid-template-rows 用来定义行高
gap: 10px 用来设置行列间距

2.使用 repeat 函数

（1）每行有5列，5列宽度全部自适应

css 复制代码

/* 定义5列：5列全部自适应 */
grid-template-columns: repeat(5, 1fr);

（2）响应式布局：所有列宽度全部自适应，最小宽度200px

css 复制代码

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

auto-fit：自动填充可用空间
minmax(200px, 1fr)：最小200px，最大按比例分配

3.仿哔哩哔哩首页布局

css

css 复制代码

    .container {
      background-color: rgb(191, 238, 222);
      padding: 20px;
      /* 启用Grid布局 */
      display: grid;
      /* 每行5个，自适应宽度 */
      grid-template-columns: repeat(5, 1fr);
      /* 统一设置行列间距 */
      gap: 10px;
    }

    .container .item {
      background-color: rebeccapurple;
      font-size: 30px;
      color: white;
    }

    .container .item1 {
      grid-row: 1/4;
      grid-column: 1/3;
    }

效果：

grid-row：该属性定义了网格元素行的开始和结束位置。
grid-row: 1 / 3; 表示行线从第一行线到第三行线为止
grid-column：该属性定义了网格元素列的开始和结束位置。
grid-column: 1 / 3; 表示列线从第一列线到第三列线为止

span 关键字

在设置 grid-row 和 grid-column 时，我们还可以使用 span 关键字。span 表示跨越的意思，下面表示跨越3行和2列

css 复制代码

.container .item1 {
    grid-row: 1/span 3;
    grid-column: 1/span 2;
  }

效果是一样的：