随着各种设备屏幕尺寸和方向的增多，web 布局也不再是只考虑固定尺寸的单一方向了。CSS Grid 布局作为一种新的技术，能够更好地解决这些问题。然而在实际使用过程中，我们经常会遇到需要保护一些行和列的情况，特别是在响应式布局中。那么在 CSS Grid 布局中如何优雅地处理这些问题呢？
为什么需要保护行和列
保护行和列通常用来限制网格的尺寸和结构，它可以使得网格在特定的设备、页面、区域中都表现出最佳的布局。以下是一些需要保护行和列的典型场景：
- 保留空间：在新的响应式布局中，元素总是要适应不同的屏幕尺寸，通过保护一些行和列可以使得元素总是处于最优的排列，以便于不会浪费空间或者使布局变得混乱。
- 使网格更加对称：当你想要实现一个对称的布局时，使用保护行和列可以帮助你在不同的屏幕宽度下，保证网格的完整性以及对称，而不会被强制将网格缩小或者延伸。
- 保护固定的展示内容：在一些展示内容中，可能会有固定的元素，这些元素需要保持固定的位置和尺寸，这时就需要使用保护行和列，以保证我们的布局始终不会崩塌。
如何使用保护行和列
实际上，在 CSS Grid 布局中，你可以很容易地实现保护一行或一列的操作。下面我们分别讲解如何使用保护行和列：
- 保护一行：在 CSS Grid 布局中，你可以通过通过使用
grid-template-rows来保护一行。比如对于下面的网格，我们想要保护第二行，代码如下：
--------------- -
-------- -----
---------------------- --------- -----
------------------- --- ------------- ----- ----
-上面代码中，我们通过 minmax(100px, auto) 将第二行的高度值最小高度设置为 100px，最大高度为自动适应。然后通过 1fr 来设置第一行和第三行的高度为自适应。这样一来，不管在何种情况下，都能够保证第二行的高度始终为 100px，而且可以自适应宽度。
- 保护一列：与保护一行不同的是，我们需要使用
grid-template-columns对列进行保护。下面是一个例子：
--------------- -
-------- -----
---------------------- --- ------------- ----- ----
------------------- --------- -----
-上面代码中，我们通过 1fr 将第一列和第三列的宽度设置为自适应，然后通过 minmax(100px, auto) 将第二列的宽度设置为最小为 100px，最大为自适应。这样一来，不管是在何种设备下，都能确保第二列的宽度不会低于 100px。
注意事项
在使用保护行和列时需要注意以下几点：
- 确保保护的行和列在所有条件下保持一致，否则布局将会变得混乱。
- 确保每行和列的总宽度或高度都等于网格容器的宽度或高度，在保护行和列之后可能会失去了一些尺寸。
- 适当地使用 minmax() 函数可以使得你的布局更加灵活，同时还能很好地保护行和列。
结论
通过保护行和列，我们可以更加轻松地设置网格的尺寸和结构，使得布局在不同的设备和条件下都能够正确地运作。CSS Grid 布局的强大和灵活性，使得我们可以更加优雅和简洁地实现一些复杂的布局，同时也能够使得我们的页面响应式更加自然。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6708a98fd91dce0dc8736d25