html - 在不使用模板区域的情况下放置网格项

Question

我有一个包含 4 个元素的容器，我想这样布局:

┌───┬───┐
│ a │ c │
╞═══╪═══╡
│ b │ d │
└───┴───┘

HTML 类似于以下内容:

<div id="container">
    <div id="a">

    </div>
    <div id="b">

    </div>
    <div id="c">

    </div>
    <div id="d">

    </div>
</div>

请注意，元素先向下，然后穿过。

我知道我可以使用 grid-template-areas 容器和 grid-area 内部元素来实现这种布局。但是，这涉及单独命名所有这四个元素。

有没有一种方法可以在不单独命名这些元素的情况下实现相同的布局？

Answer 1

将 grid-auto-flow: column 添加到您的网格容器中。不需要 grid-template-areas。

此属性控制网格项的定向流。默认值为 行。

#container {
  display: inline-grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
  grid-auto-flow: column;
}

/* non-essential demo styles */
#container > div {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">e</div>
</div>

§ 7.7. Automatic Placement: the grid-auto-flow property

[This property] controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

row

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

column

The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.