问题描述
在使用 CSS Grid 布局时，经常会出现底部空白的问题。这个问题的原因是，CSS Grid 布局会自动为每一行添加一个空白的网格行，如果最后一行没有填满，那么就会出现底部空白的情况。
例如，下面这个简单的 CSS Grid 布局示例，就会出现底部空白的问题：
-- -------------------- ---- ------- ---- ----------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ----------------- ----- -------- ----- ----------- ------- - --------
解决方法
方法一：使用 grid-auto-rows 属性
使用 grid-auto-rows 属性可以设置自动添加的网格行高度，从而解决底部空白的问题。我们可以将 grid-auto-rows 属性设置为 minmax(0, auto)，这样就可以让自动添加的网格行高度根据内容自适应。
-- -------------------- ---- ------- ---- ----------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- --------------- --------- ------ - ----- - ----------------- ----- -------- ----- ----------- ------- - --------
方法二：使用 grid-auto-flow 属性
使用 grid-auto-flow 属性可以改变自动填充网格的方向。默认情况下，grid-auto-flow 属性值为 row，即自动填充行。我们可以将 grid-auto-flow 属性值设置为 dense，这样就可以让自动填充的网格尽量填满空白区域，从而避免底部空白的问题。
-- -------------------- ---- ------- ---- ----------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- --------------- ------ - ----- - ----------------- ----- -------- ----- ----------- ------- - --------
总结
底部空白是 CSS Grid 布局常见的问题之一，但是通过使用 grid-auto-rows 属性和 grid-auto-flow 属性，我们可以轻松解决这个问题。同时，我们也可以根据实际情况选择不同的解决方法，从而达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e9de0eb4cecbf2d47b3c0