在现代前端开发中，网格布局已成为构建复杂和灵活布局的首选方式。而 CSS Grid，作为一种相对较新的网格布局技术，可以极大地简化大多数复杂布局的实现。本文将介绍如何使用 CSS Grid 实现基本的地图卡片展示，希望能够提供一些学习和指导的意义。
确立基本的 HTML 结构
在开始 CSS Grid 布局之前，我们需要先定好 HTML 结构。在本例中，我们将使用一个简单的 div 容器来存储我们的卡片，每张卡片有一个标题和一张图片。以下是 HTML 结构：
<div class="card"> <h2>卡片标题</h2> <img src="card-image.jpg" alt="卡片图片" /> </div>
使用 CSS Grid 布局
完成了基本的 HTML 结构，接下来就可以用 CSS Grid 开始布局了。我们需要做的第一件事是确定我们想要实现的布局的行和列。在本例中，我们需要一行和多列的网格布局，每个卡片都应该在一个单独的网格单元格中。
为此，我们可以在父容器上设置 display: grid，然后确定行和列的数量。在本例中，我们想要每行只有一个网格单元格，而列的数量应取决于我们想要在其中放置多少卡片。以下是 CSS 代码：
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 1rem;
}在上面的代码中，grid-template-columns 和 grid-template-rows 属性确定了每列和每行应该具有的网格单元格数量。其中 repeat() 函数可以重复指定的值多次。在本例中，我们将每行设置为一个单位的高度，因此每个卡片都将在自己的行中。同时，对于列，我们创建了3个等宽的网格单元格。在这里，我们设置了一个 grid-gap 属性，这是一个简单的方法来设置所有行和列之间的间距。
现在，我们已经有了一个基本的网格布局，但我们的卡片并没有完全充满整个单元格。我们需要使用 grid-row 和 grid-column 属性来将每个卡片放入正确的单元格中。在本例中，我们希望每个卡片都占据一个单元格，因此我们可以将 grid-row 属性设置为相应的行数（从1开始），并使用 grid-column 属性将其放入相应的列。
以下是示例代码：
-- -------------------- ---- ------- ----- - --------- -- ------------ -- - ------------------ - --------- -- ------------ -- - ------------------ - --------- -- ------------ -- - -- ------------- --
结论
现在你已经掌握了如何使用 CSS Grid 实现基本的地图卡片布局。希望这篇文章能够帮助你学习并理解 CSS Grid 的使用方法，以便在设计和开发中实现更复杂和灵活的布局。
完整的 HTML 和 CSS 代码见下：
-- -------------------- ---- -------
---- ------------------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
---- -------------
-------- ------
---- ---------------------- ---------- --
------
-------- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ----- - --------- -- ------------ -- - ------------------ - --------- -- ------------ -- - ------------------ - --------- -- ------------ -- - -- ------------- --
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671aff3a9babaf620fa6ddda