CSS Grid 是一种强大的布局模式，可以实现响应式布局，而且其语法简单易懂，适用于各种不同的设备和屏幕大小。本文将介绍 CSS Grid 的 8 个技巧，帮助您实现响应式布局。
技巧一：使用 grid-template-areas
grid-template-areas 可以在 CSS Grid 中创建基于命名区域的布局。通过使用这个属性，您可以将不同的元素划分为不同的区域，并为每个区域命名。这样，您就可以使用 grid-template-areas 属性来定义布局。
例如，下面是一个简单的实例：
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------------------
------- ------ -------
----- ------ ------
------- ------ --------
-
------- -
---------- -------
-
----- -
---------- -----
-
------- -
---------- -------
-
------ -
---------- ------
-
------- -
---------- -------
-在上述示例中，我们使用了 grid-template-areas 属性来创建一个命名的网格布局。然后，我们使用 grid-area 属性来将元素放置在不同的区域中。
技巧二：使用 grid-template-columns 和 grid-template-rows
使用 grid-template-columns 和 grid-template-rows 属性可以定义网格的列和行。这两个属性可以接受多个值，每个值表示一个列或行的大小。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}在上述示例中，我们使用 repeat() 函数创建了三列和三行。每列的宽度为 1fr，每行的高度为 100px。
技巧三：使用 grid-auto-flow
grid-auto-flow 属性可以控制网格中新元素的放置方式。默认情况下，新元素会按照源代码中的顺序排列。但是，使用 grid-auto-flow 属性，您可以改变这种行为。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-auto-flow: row dense;
}在上述示例中，我们使用 grid-auto-flow 属性将新元素的放置方式改为按行排列，并使用 dense 值使网格更加紧凑。
技巧四：使用 grid-gap
使用 grid-gap 属性可以在网格中添加空隙。这个属性可以接受两个值，分别表示水平和垂直方向上的间距。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}在上述示例中，我们在网格中添加了 20px 的间距。
技巧五：使用 minmax()
使用 minmax() 函数可以定义网格中元素的最小和最大大小。这个函数接受两个参数，分别表示最小和最大的大小。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
grid-template-rows: repeat(3, minmax(100px, 1fr));
}在上述示例中，我们使用 minmax() 函数定义了每列和每行的最小和最大大小。
技巧六：使用 grid-template-rows: auto
使用 grid-template-rows: auto 可以使行的大小自适应内容。这个属性可以在某些情况下非常有用，例如当您需要让行的高度根据内容自动调整时。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}在上述示例中，我们使用 grid-template-rows: auto 让行的大小自适应内容。
技巧七：使用 grid-template-columns: auto-fit
使用 grid-template-columns: auto-fit 可以创建自适应列。这个属性可以在某些情况下非常有用，例如当您需要让列的宽度根据内容自动调整时。
例如，下面是一个示例：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}在上述示例中，我们使用 grid-template-columns: auto-fit 和 minmax() 函数创建了自适应列。
技巧八：使用 @media 查询
使用 @media 查询可以根据不同的屏幕大小和设备类型应用不同的 CSS 规则。这个技巧可以帮助您实现响应式布局。
例如，下面是一个示例：
-- -------------------- ---- -------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
-
------ ----------- ------ -
----- -
---------------------- --------- -----
------------------- --------- -------
-
-在上述示例中，我们使用 @media 查询根据屏幕宽度应用不同的 CSS 规则。
结论
CSS Grid 是一个强大的布局模式，可以帮助您实现响应式布局。通过使用上述 8 个技巧，您可以更好地掌握 CSS Grid，并实现更加复杂的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67627bb5856ee0c1d404126f