如何重新排列 CSS 网格布局中的列？

更改 CSS 网格中的列顺序

在 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中文网其他相关文章！