菜鸟教程
教程 css tutorial

隐式与显式网格

CSS Grid 布局中，网格分为显式网格和隐式网格：

1. 显式网格

显式网格由开发者通过 grid-template-rows 和 grid-template-columns 明确定义行列数和尺寸。

css 
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 50px 150px;

显式网格只包含已定义的行和列。

2. 隐式网格

当项目超出显式定义的网格范围时，浏览器自动创建的额外行或列，称为隐式网格。

隐式行高度和隐式列宽度由 grid-auto-rows 和 grid-auto-columns 控制。

css 
grid-auto-rows: 100px;
grid-auto-columns: 150px;

3. 自动放置

未明确指定位置的项目，按照自动放置规则填充显式或隐式网格。

隐式与显式网格示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Grid 隐式与显式网格示例</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 1fr;
      grid-template-rows: 80px;
      grid-auto-rows: 60px;
      grid-auto-columns: 150px;
      gap: 10px;
      background-color: #f0f4c3;
      padding: 10px;
      border: 2px solid #afb42b;
    }
    .grid-item {
      background-color: #dce775;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: #33691e;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item" style="grid-column: 1 / 2; grid-row: 1 / 2;">项目 1</div>
    <div class="grid-item" style="grid-column: 2 / 3; grid-row: 1 / 2;">项目 2</div>
    <div class="grid-item">项目 3（自动放置）</div>
    <div class="grid-item">项目 4（隐式网格行）</div>
    <div class="grid-item">项目 5（隐式网格列）</div>
  </div>
</body>
</html>

相关内容