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。

此属性控制网格项目的方向流。默认值为row。

#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

[此属性]控制自动放置算法的工作方式，   确切指定自动放置的项目如何流入网格。

row

自动放置算法通过依次填充每一行来放置项目，   根据需要添加新行。如果row和column都不是   如果提供，则假定为行。

column

自动放置算法通过填充列中的每一列来放置项目   然后，根据需要添加新列。

放置网格项而不使用模板区域

1 个答案: