利用CSS Grid实现响应式个人主页

你好，欢迎来到今天的讲座！

大家好！今天我们要聊一聊如何利用CSS Grid来创建一个响应式的个人主页。如果你已经厌倦了那些千篇一律的Bootstrap模板，或者你想要更灵活、更强大的布局工具，那么CSS Grid绝对是你的好朋友！我们将会从基础开始，一步步带你构建一个美观且响应式的个人主页。

什么是CSS Grid？

CSS Grid 是一种二维布局系统，允许你在页面上同时控制行和列的布局。相比于传统的 Flexbox 或者浮动布局，Grid 提供了更多的灵活性和控制力。你可以轻松地定义网格的结构，并根据屏幕大小调整内容的排列方式。

为什么选择CSS Grid？

强大的布局能力：你可以轻松创建复杂的多列或多行布局，而不需要依赖大量的嵌套容器。
响应式设计：通过媒体查询和 fr 单位，你可以让网格在不同设备上自动调整大小。
语义化代码：Grid 的代码更加简洁，减少了不必要的 HTML 结构，提升了可读性。
浏览器支持良好：现代浏览器对 CSS Grid 的支持非常好，几乎所有的主流浏览器都支持它。

准备工作

在我们开始之前，确保你已经有一个基本的 HTML 结构。我们可以使用以下的 HTML 作为起点：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的个人主页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>欢迎来到我的个人主页</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#about">关于我</a></li>
      <li><a href="#projects">项目</a></li>
      <li><a href="#contact">联系我</a></li>
    </ul>
  </nav>
  <main>
    <section id="about">
      <h2>关于我</h2>
      <p>这里是关于我的一些介绍。</p>
    </section>
    <section id="projects">
      <h2>我的项目</h2>
      <p>这里是我做过的项目。</p>
    </section>
    <section id="contact">
      <h2>联系我</h2>
      <p>这里是联系我的方式。</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2023 我的名字</p>
  </footer>
</body>
</html>

第一步：定义网格容器

接下来，我们将在 body 元素上应用 CSS Grid。我们将使用 display: grid 来将整个页面变成一个网格容器。然后，我们可以定义网格的行和列。

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

在这里，我们定义了三行：第一行是 auto，用于放置标题；第二行是 1fr，表示剩余的空间；第三行也是 auto，用于放置页脚。1fr 是一个非常有用的单位，它代表“可用空间的一部分”。

第二步：添加侧边栏

现在，我们想在页面左侧添加一个侧边栏，用来放置导航菜单。为了实现这一点，我们可以修改 grid-template-columns，并为侧边栏分配一定的宽度。

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 20px;
}

nav {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

main {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

在这个例子中，我们为侧边栏分配了 200px 的固定宽度，并将其放置在第一列（grid-column: 1 / 2）。main 内容则放置在第二列（grid-column: 2 / 3），并且占据了中间的行（grid-row: 2 / 3）。

第三步：响应式设计

为了让我们的页面在小屏幕上也能正常显示，我们需要使用媒体查询来调整网格的布局。例如，当屏幕宽度小于 768px 时，我们可以将侧边栏移到顶部，并让 main 内容占据整个宽度。

@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  nav {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

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

这样，当屏幕变窄时，导航菜单会移动到页面的顶部，main 内容则会占据整个页面的宽度。这就是响应式设计的魅力！

第四步：优化移动端体验

为了让移动端用户有更好的体验，我们还可以进一步优化布局。例如，我们可以为导航菜单添加一个汉堡按钮，点击后展开或收起菜单。这可以通过 JavaScript 实现，但今天我们主要关注 CSS Grid 的部分。

我们可以在小屏幕上隐藏导航菜单中的链接，并使用一个按钮来控制它们的显示和隐藏。

@media (max-width: 768px) {
  nav ul {
    display: none;
  }

  nav .menu-toggle {
    display: block;
  }
}

第五步：使用 `fr` 单位实现自适应布局

fr 单位是 CSS Grid 中的一个强大工具，它可以让你根据可用空间动态调整网格项的大小。例如，假设我们想让 main 内容占据 70% 的宽度，而侧边栏占据 30% 的宽度。我们可以使用 fr 单位来实现这一点。

body {
  grid-template-columns: 3fr 7fr;
}

这里的 3fr 表示侧边栏占据 3 份空间，而 7fr 表示 main 内容占据 7 份空间。总共有 10 份空间，因此侧边栏将占据 30%，main 内容将占据 70%。

第六步：使用 `repeat()` 和 `minmax()` 函数

有时候，你可能需要创建一个具有多个相同列或行的网格。这时候，repeat() 函数就派上用场了。例如，如果你想创建一个 4 列的网格，每列的宽度为 200px，你可以这样做：

grid-template-columns: repeat(4, 200px);

此外，minmax() 函数可以让你为网格项设置最小和最大宽度。例如，如果你想让每个项目的宽度至少为 200px，但不超过 400px，你可以这样做：

grid-template-columns: repeat(4, minmax(200px, 400px));

第七步：使用 `auto-fit` 和 `auto-fill`

auto-fit 和 auto-fill 是两个非常有用的属性，它们可以帮助你根据可用空间自动调整网格项的数量。例如，如果你想创建一个响应式的图片墙，你可以使用 auto-fit 来让图片根据屏幕宽度自动排列。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

这段代码的意思是：根据可用空间，尽可能多地创建宽度为 200px 的列，但如果空间不足，则让列的宽度自动扩展以填满整个容器。

总结

通过今天的讲座，我们学习了如何使用 CSS Grid 创建一个响应式的个人主页。我们从基础的网格布局开始，逐步添加了侧边栏、响应式设计、自适应布局等功能。CSS Grid 是一个非常强大的工具，它可以帮助你轻松实现复杂的布局，同时保持代码的简洁性和可维护性。

如果你还没有尝试过 CSS Grid，我强烈建议你去阅读一下 MDN Web Docs 上的官方文档，那里有更多关于 CSS Grid 的详细解释和示例。

最后，别忘了在实践中不断探索和尝试，毕竟，最好的学习方式就是动手去做！希望今天的讲座对你有所帮助，期待下次再见！ 😊