在设计响应式网站时，正确使用 CSS Grid 可以让我们轻松地实现各种复杂的网格布局。在小屏幕设备上，CSS Grid 可以让我们以更有效的方式配置网页，提高用户体验。在本文中，我们将分享几个实现响应式小屏幕布局的 CSS Grid 技巧。
使用媒体查询
媒体查询是使用 CSS Grid 实现响应式布局非常重要的一部分。在我们创建网格之前，我们需要使用媒体查询确定哪些CSS规则应该应用于特定的屏幕尺寸。下面是一些使用媒体查询实现响应式网格的示例：
-- -------------------- ---- -------
-- --------- ------ - --
------ ------ --- ----------- ------- -
---------- -
-------- -----
---------------------- --------- -----
--------- -----
-
-
-- ------- ------ ----- ----- - --
------ ------ --- ----------- ------- --- ----------- ------ -
---------- -
-------- -----
---------------------- --------- -----
--------- -----
-
-
-- ------- ----- - --
------ ------ --- ----------- ------ -
---------- -
-------- ------
-
-使用分数值和 auto
在 CSS Grid 中，可以使用分数值和 auto 分配网格空间。小屏幕上使用这些值最为常见，因为它们可以帮助我们更有效地平衡网格的大小和间距。
下面是一个示例，该示例使用分数值和 auto 在两个列中创建一个简单的网格：
.container {
display: grid;
grid-template-columns: 1fr auto;
}在这个示例中，第一个列将占据网格的所有剩余空间，而第二个列则会适应其内容的宽度。
使用 minmax 函数
对于那些在小屏幕上需要自适应宽度的元素，可以使用 minmax() 函数调整它们的大小。minmax() 的语法如下：
minmax(minimum, maximum)
下面是一个示例，该示例使用 minmax() 函数设置单元格的大小范围：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1rem;
}在这个示例中，单元格的最小宽度为 200px，最大宽度为 1fr，这使得单元格始终可以适应其容器的宽度。
使用 repeat() 函数
在设计网格布局时，我们可能会发现自己需要重复某个单元格大小的定义。为了避免这种情况，CSS Grid 提供了 repeat() 函数。repeat() 函数的语法如下：
repeat(n, size)
下面是一个示例，该示例使用 repeat() 函数重复定义了 4 个 1fr 宽度的列：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}使用 grid-template-areas
grid-template-areas 属性允许我们使用区域名称来定义网格布局。这是一种在小屏幕上设计响应式布局的有用方式。
下面是一个示例，该示例使用 grid-template-areas 属性定义了一个在小屏幕上的响应式布局：
-- -------------------- ---- -------
---------- -
-------- -----
-- ------- --
--------------------
--------
-----
---------
---------
-
-- ------- --
------ ------ --- ----------- ------ -
---------- -
---------------------- --- ----
--------------------
------- -------
---- ----
-------- --------
------- --------
-
-这里看一下对应的HTML代码：
<div class="container"> <header class="top">Header</header> <nav>Navigation</nav> <div class="sidebar">Sidebar</div> <div class="content">Main Content</div> <footer class="bottom">Footer</footer> </div>
总结：本文介绍了几个使用 CSS Grid 实现响应式小屏幕布局的技巧，这些技巧包括使用媒体查询、分数值和 auto、minmax() 函数、repeat() 函数和 grid-template-areas 属性。这些技巧可以帮助我们实现各种复杂的网格布局，同时提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2cc6cadd4f0e0ffae56f9