在 CSS 网格中，您可以通过使用网格指定列数和行数来定义网格的布局- template-columns 和 grid-template-rows 属性。然而，重新排列这些列的顺序可能是一个挑战。
解决方案：使用密集关键字的网格自动流
虽然有多种方法可以重新排列网格项目，使用带有 grid-auto-flow 属性的密集关键字提供了一个简单而有效的解决方案：
<code class="css">grid-auto-flow: dense;</code>
dense 关键字告诉浏览器自动用网格项填充空网格单元，移动它们以填充
应用到示例
通过将密集关键字添加到现有网格类，列将在移动布局上自动重新排列以匹配所需的顺序：
<code class="css">.my-grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 15% 1fr 25%;
grid-template-rows: 1fr; /* For as many rows as you need */
grid-gap: 10px;
border: 2px solid #222;
box-sizing: border-box;
}</code>结果：
--------------------------------------------- | col 1 | col 3 | | | | --------------------------------------------- | col 2 | ---------------------------------------------
此解决方案提供了一种方便而强大的方法来更改列顺序，而无需借助预处理器.
以上是如何重新排列 CSS 网格布局中的列？的详细内容。更多信息请关注PHP中文网其他相关文章！
