在 CSS 網格中對齊列

Question

之前我使用 Flexbox 創建了一個 12 列的網格系統。 在使用 CSS Grid 實現類似的系統時，出現了列對齊問題。

例如：有一個12列的系統，兩個元素占3列，一個接一個，使用Flexbox時可以指定justify-content: space-between來分隔容器兩邊的這些列。

如果在fr中指定列的寬度並且使用grid-column: span $number屬性指定元素占用的列數，則如何在使用 CSS Grid 時實現相同的行為？

不希望手動指定元素從哪一列開始以通過這種方式實現偏移（例如：從第 9 列開始到第 12 列結束）。

我附上了一個基本的可復制示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      body {
        font-family: sans-serif;
      }

      .container {
        width: 1000px;
        margin: 0 auto;
      }

      .grid {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(12, 1fr);
         /* justify-content: space-between; ? */
        border: 1px solid teal;
      }

      .box {
        color: #ffffff;
        background: teal;
        border-radius: 4px;
        padding: 10px;
      }

      .col-3 {
        grid-column: span 3;
      }

      /* Other classes from 1 to 12 ... */
    </style>

    <div class="container">
      <div class="grid">
        <div class="box col-3">Box 1</div>
        <div class="box col-3">Box 2</div>
      </div>
    </div>
  </body>
</html>

Answer 1

對於網格的工作方式，您必須指定每個框的起始位置，至少對於您的問題而言。

如果你真的不想指定起始列，你可以創建一個網格：

grid-template-columns: 3fr 6fr 3fr即3 + 6 + 3 = 12 列

在您的 HTML 中，只需在兩個框之間添加第三個填充div ，這樣它就可以占據網格中的 6fr 部分。

更新：

 .container { width: 1000px; margin: 0 auto; }.grid { display: grid; grid-template-columns: 3fr 6fr 3fr; border: 1px solid teal; }.box { color: #ffffff; background: teal; border-radius: 4px; padding: 10px; }.col-3-start { grid-column: span 3; }.col-3-end { grid-column: -4 / span 3; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div class="container"> <div class="grid"> <div class="box">Box 1</div> <div class="filler"></div> <div class="box">Box 2</div> </div> </div> </body> </html>

在 CSS 網格中對齊列

問題描述

1 個解決方案

解決方案1
0 2022-12-13 00:10:07

在 CSS 網格中對齊列

問題描述

1 個解決方案

解決方案1 0 2022-12-13 00:10:07

解決方案1
0 2022-12-13 00:10:07