CSS Grid （网格布局） 提供了一种快速创建响应式布局的方法。它是一个二维的网格系统，可以让我们更容易地控制页面元素的位置和尺寸。在本文中，我们将学习如何使用 CSS Grid 创建响应式卡片布局，并提供一些实例代码来帮助您开始使用。
简介
卡片式布局具有许多应用。从展示产品到新闻文章，卡片布局是一种流行的设计选择。卡片通常是由标题，图像和内容组成的，而且有时还有一个按钮或者底部栏。
使用 CSS Grid 创建卡片式布局可能比使用传统的布局技术更容易，因为它在二维平面上提供了更多的布局选项和灵活性，这意味着您可以使用更少的代码来创建更多的布局。
实现响应式卡片布局
让我们从创建一个固定的卡片布局开始。基本的 HTML 结构就是一个简单的 div，它包含卡片的所有内容。我们将使用 grid-gap 属性来添加间隔，并使用 grid-template-columns 定义卡片的列宽。
<div class="card"> <h2>卡片标题</h2> <img src="card-image.jpg" alt="卡片图片"> <p>卡片内容</p> <a href="#">查看更多信息</a> </div>
.card { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
这将创建一个三列布局。每个卡片都将占据三分之一的宽度。需要注意的是，此布局是固定的，如果浏览器窗口的宽度小于此布局的宽度，卡片将堆叠在一起。
为了创建一个响应式布局，我们需要使用 CSS Media Queries。我们可以使用 min-width 和 max-width 属性来确定在哪个屏幕大小下应用哪些CSS样式。
下面是一个响应式卡片布局的实例代码：
-- -------------------- ---- ------- ---- --------------------- ---- ------------- ------------- ---- -------------------- ----------- ----------- -- ------------------- ------ ---- ------------- ------------- ---- -------------------- ----------- ----------- -- ------------------- ------ ---- ------------- ------------- ---- -------------------- ----------- ----------- -- ------------------- ------ ------展开代码
-- -------------------- ---- ------- ------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- ----- ------- --- ----- -------- -------------- ---- ----------- --- --- --- ----- -------- ----- ----------- ------- - ------ ------ --- ----------- ------ - ------------- - ---------------------- ---------------- ------------- ------ - -展开代码
在这段代码中，我们使用了 auto-fit 和 minmax() 函数来创建响应式列数。这意味着列会自适应以适应屏幕大小。auto-fit 函数的作用是让列自动填充可用的空间，而 minmax() 函数指定了列允许的最小和最大值。在这个例子中我们将列的最小宽度设置为 300px，并将它们均分为可用的空间。如果屏幕窗口变窄，列会相应地缩小。
在我们的媒体查询中，我们将列的最小宽度降低到了 200px。这意味着当屏幕大小变小时，我们仍然能够看到三列布局，但是它们的宽度将相应调整。
总结
CSS Grid 是一个强大的工具，可以让我们更轻松地创建响应式布局。在这个教程中，我们学习了如何使用 CSS Grid 创建响应式卡片布局。当然，CSS Grid 还有许多其他功能和选项，如 grid-template-rows 和 grid-auto-rows 属性，您可以使用它们来创建更高级的布局。希望这篇文章能够让您对使用 CSS Grid 的卡片布局有个更深入的了解，让您更轻松地创建漂亮的网站布局！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6541a3537d4982a6ebb38a55
