CSS 网格：3 个实用示例 简介 搜索过滤器 图片库 精美主页布局 总结

2025-05-25

CSS 网格：3 个实用示例

介绍

搜索过滤器

图片库

精美的主页布局

总结

这是 CSS 网格系列的第二篇文章。在第一篇文章中，我们了解了 CSS 网格的所有基础知识和最重要的属性。如果您想查看文章内容，可以点击此处。

介绍

在本文中，我们将探讨 Web 开发者在项目中可能遇到的三种情况。首先，我们将实现一个搜索过滤器组件。然后，我们将看看 CSS 网格如何帮助我们轻松实现一个原本很难实现的图片库。最后，我们将实现一个在 Dribble 上不断出现的流行主页布局 :)

由于本文是关于 CSS 网格的，我们将重点介绍如何实现每个示例的布局。

如果您准备好了，我们就直接进入第一部分吧！

搜索过滤器

在本节中，我们将实现一个搜索过滤器包装器，类似于我们在产品集合或其他东西上看到的包装器。该搜索过滤器包装器将包含一些输入框和两个操作按钮：“重置”和“搜索”。这两个操作按钮必须始终位于包装器的右下角，如图1所示：

搜索过滤器图例 1

图 1：搜索过滤器

不过，有一个问题：我们希望操作按钮位于最后一行的最后一列。这意味着，如果有足够的空间，它应该与输入框在同一行。参见下面的图 2：

搜索过滤器图例 2

图 2：操作按钮行为

好了，如果规范明确，我们就从包含一些输入框和两个操作按钮的 HTML 代码开始实现。所以，它看起来应该像这样：

    <div class="filter-wrapper">
      <div class="filter-input">input 1</div>
      <div class="filter-input">input 2</div>
      <div class="filter-input">input 3</div>
      <div class="filter-input">input 4</div>
      <div class="filter-input">input 5</div>
      <div class="filter-input">input 6</div>

      <div class="action-btns">
        <button type="reset">Reset</button>
        <button type="submit">Search</button>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

这样，我们现在就可以设置网格，使其自动（动态读取）设置行数和列数。我们还应该设置每行的高度和每列的最小宽度，以使网格看起来美观：

.filter-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  grid-auto-rows: 6ch; /* height of each row (definition in the first post) */
  grid-gap: 2ch;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们实现操作按钮单元格的行为。如前所述，我们希望它始终位于右下角，即最后一行的最后一列。由于它已经在最后一行了（因为 HTML 中的位置），我们只需要指定它必须位于最后一列：

.filter-wrapper .action-btns {
  grid-column-end: -1;
}
Enter fullscreen mode Exit fullscreen mode

请注意，我们在第一篇文章中没有看到grid-column-end，它定义了项目将在哪条列线上结束（它将自动找出起始列线）。

仅用这几行 CSS，我们就定义了搜索过滤器包装器的正确行为。最终代码可以在这个 codepen上找到。

图片库

接下来，让我们实现一个与源顺序无关的图片库。就像我们在第一篇文章中看到的那样，我们可以使用它grid-auto-flow: dense来让浏览器自行决定如何放置元素。假设我们有以下网格：

替代文本

图 3：实施不当的网格

我们希望浏览器重新排列元素，使其不包含空格。如下图 4所示：

替代文本

图4：正确实现的网格

好吧，假设我们有以下 HTML 代码：

    <div class="gallery">
      <div class="gallery-item horizontal">1</div>
      <div class="gallery-item">2</div>
      <div class="gallery-item vertical">3</div>
      <div class="gallery-item">4</div>
      <div class="gallery-item horizontal">5</div>
      <div class="gallery-item vertical horizontal">6</div>
      <div class="gallery-item">7</div>
      <div class="gallery-item horizontal vertical">8</div>
      <div class="gallery-item vertical">9</div>
      <div class="gallery-item">10</div>
      <div class="gallery-item">11</div>
      <div class="gallery-item">12</div>
      <div class="gallery-item horizontal">13</div>
      <div class="gallery-item">14</div>
    </div>
Enter fullscreen mode Exit fullscreen mode

我们希望带有 类的元素horizontal跨越两个列单元格，带有 类的元素vertical跨越两个行单元格。因此，我们在 CSS 文件中指定：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  grid-gap: 1rem;
  grid-auto-flow: dense;
}
.horizontal {
  grid-column: span 2;
}
.vertical {
  grid-row: span 2;
}
Enter fullscreen mode Exit fullscreen mode

就是这么简单。你可以在下面的codepen中找到完整的代码：

代码笔

点击图片访问codepen

您可以使用此 API https://www.placecage.com使用 Nicolas Cage 占位符图像😄

精美的主页布局

对于最后一个实际示例，让我们实际实现一个类似于下图的主页布局：

替代文本

图 5：精美的主页布局

我们将把页面划分成不同的元素。顶部是工具栏，中间左侧是主标题区域，然后是白色面板，最后是轮播（带有三个大按钮）。我们将使用下面的模板来代表我们提到的不同区域：

    <main class="fancy-homepage">
      <div class="toolbar">Toolbar</div>
      <div class="title">Main title</div>
      <div class="panel">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Aspernatur delectus voluptatem maxime modi nesciunt officia.
      </div>
      <div class="caroussel">
        <div class="caroussel-item">item 1</div>
        <div class="caroussel-item">item 2</div>
        <div class="caroussel-item">item 3</div>
      </div>
    </main>
Enter fullscreen mode Exit fullscreen mode

那么，我们先从实现网格开始。我觉得 24 列 14 行的网格效果很好，但这只是我的个人看法。CSS 代码应该如下所示：

.fancy-homepage {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(14, 1fr);
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们将工具栏放置在网格上。我们希望工具栏跨越一行并跨越所有列（即整个屏幕的宽度）：

.toolbar {
  grid-row: 1 / span 1;
  grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

之后，我们要放置面板。我们会在工具栏和面板之间留出一个空行。这意味着面板将从第 3 行开始。此外，我们希望它从屏幕宽度的中间位置开始，直到屏幕边缘（右侧）：

.panel {
  grid-row: 3 / -1; /* to leave an empty row between the toolbar and the panel */
  grid-column: 10 / -1; /* the width-middle of the screen is 12 */
}
Enter fullscreen mode Exit fullscreen mode

我们快完成了，现在让我们放置轮播：我们希望它位于屏幕的底部（从屏幕高度中间略下方开始），我们希望它占据整个宽度：

.caroussel {
  grid-row: 9 / -1; /* the height-middle of the screen is 7 */
  grid-column: 1 / -1;
}
Enter fullscreen mode Exit fullscreen mode

结果应该是这样的：

替代文本

图6：精美的主页布局草稿

为了完成此示例，我们将主标题区域放置在屏幕左中部的空白处。垂直方向上，其边界必须是第 9 行线（因为它是轮播的起始行线），水平方向上，其边界必须是第 10 列线（因为它是面板的起始列线）。但是，我们在元素之间留出一些空间，因此主标题区域必须从第 2 列线开始，到第 9 列线（10 - 1）结束，并且必须从第 3 行线开始到第 8 行（9 - 1）：

.title {
  grid-row: 3 / 8;
  grid-column: 2 / 9;
}
Enter fullscreen mode Exit fullscreen mode

就这样！添加一些样式后，效果会更好，最终效果如下：

代码笔

点击图片访问codepen

一个不错的练习方法是 fork 这个 codepen，不要使用网格线编号（这可能会变得混乱），而是使用命名的网格线（你可以为网格线指定别名，就像我们在第一篇文章中看到的那样）

总结

大结局 gif

因此，在本文中，我们了解了 Web 开发人员可能遇到的三种情况，并了解了 CSS 网格如何帮助我们轻松实现一些原本难以实现的行为（例如图片库的源码顺序独立性）。此外，CSS 网格让我们在实现一些特殊行为和（或多或少）花哨布局的同时，保持模板的简洁，而这些布局原本需要我们手动操作模板。

我希望你喜欢这篇文章，并且发现一些有用的东西:)
祝你编码愉快！

嘿，我们保持联系吧！

我正在准备很多精彩的文章和教程。如果你喜欢这篇，记得关注我的Twitter或关注我的LinkedIn，这样就能及时了解下一篇的发布时间。

接下来读什么？

穆斯塔法

你可能还不知道的 7 个令人惊叹的 CSS 属性

Mustapha Aouas ・ 2020年4月20日

#css #webdev #design #beginners
文章来源：https://dev.to/mustapha/css-grid-3-practical-examples-51p9
Devto 翻译
PREV
CSS 网格：图解介绍 简介 1. 开始之前 2. CSS 网格基本属性 3. 高级模板 4. 隐式行和网格流 结论
NEXT
你可能还不知道的 7 个令人惊叹的 CSS 属性 文本和数字 形状 总结