剖析 Grid 布局：巧妙拆分，构建灵活布局的新思路

前端

2023-11-08 11:35:43

精通 Grid 布局的利器：拆分网格和实战练习

灵活的布局，前端开发的利器

在前端开发中，布局扮演着至关重要的角色。Grid 布局作为一种强有力的工具，让我们能够轻松创建复杂的布局，并适应不同屏幕尺寸和设备。然而，要想熟练掌握 Grid 布局，除了学习它的基本用法，实践也是必不可少的。

拆分网格：破解不规则布局的利器

面对不规则布局时，第一反应可能是无从下手。但别担心，通过拆分网格，我们可以将复杂的问题分解成更小的、更易管理的部分。

具体案例：扩大侧边栏

假设我们有一个这样的布局：标题和正文居左，侧边栏居右，页脚横跨两栏。现在，我们想让侧边栏占满整个右侧区域。

<div class="container">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <div class="main">
      <p>正文</p>
    </div>
    <div class="sidebar">
      <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <p>页脚</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-column: 1 / 3;
}

.content {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.main {
  grid-column: 1 / 2;
}

.sidebar {
  grid-column: 2 / 3;
}

.footer {
  grid-column: 1 / 3;
}

此时，我们通过在网格中添加一个额外的列，即可将侧边栏扩展到整个右侧区域。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-column: 1 / 4;
}

.content {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
}

.main {
  grid-column: 1 / 2;
}

.sidebar {
  grid-column: 2 / 4;
}

.footer {
  grid-column: 1 / 4;
}