使用 CSS Grid 实现多列布局

使用 CSS Grid 实现多列布局

最近在学习 CSS Grid 布局，发现它非常强大且灵活。今天分享一个简单的例子，展示如何使用 CSS Grid 实现一个多列布局。

代码示例

<html>

<head>
  <style>
    .el-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 每行 4 列 */
      gap: 10px; /* 列之间的间距 */
    }

    .el-row {
      display: contents; /* 忽略 el-row 的布局，直接使用 grid 布局 */
    }

    .el-col {
      box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
      border: 1px solid blue; /* 为了视觉效果 */
    }
  </style>
</head>

<body>
  <div class="el-container">
    <div class="el-row">
      <div class="el-col">1</div>
      <div class="el-col">2</div>
      <div class="el-col">3</div>
    </div>
    <div class="el-row">
      <div class="el-col">4</div>
      <div class="el-col">5</div>
      <div class="el-col">6</div>
    </div>
    <div class="el-row">
      <div class="el-col">7</div>
      <div class="el-col">8</div>
      <div class="el-col">9</div>
    </div>
  </div>
</body>

</html>

代码解析

  1. el-container: 这是最外层的容器，使用了 display: grid 来启用 Grid 布局。grid-template-columns: repeat(4, 1fr) 表示每行有 4 列，每列的宽度相等。gap: 10px 设置了列与列之间的间距。

  2. el-row: 这个类使用了 display: contents，这意味着它本身不会生成任何布局，而是直接将其子元素（即 el-col）放入 Grid 布局中。这样可以避免额外的嵌套层级，简化布局结构。

  3. el-col: 这是每个网格项的样式，设置了 box-sizing: border-box 以确保边框和内边距不会影响元素的宽度。为了视觉效果，还添加了蓝色的边框。

效果展示

运行上述代码后，你会看到一个 4 列的网格布局，每行有 3 个元素，元素之间有 10px 的间距。每个元素都有一个蓝色的边框，方便观察布局。

总结

CSS Grid 是一个非常强大的布局工具，特别适合处理复杂的网格布局。通过 display: contents，我们可以进一步简化布局结构，避免不必要的嵌套。希望这个例子对大家有所帮助！

 

posted @ 2025-03-19 08:55  Promise-  阅读(96)  评论(0)    收藏  举报