代码之家 › 专栏 › 技术社区 › Manngo

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

css-grid css3 css html

Manngo · 技术社区 · 7 年前

我有一个包含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 对于内部元素。但是,这需要分别命名这四个元素。

1 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

添加 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

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

一行

根据需要添加新行。如果两者都没有也没有 column 是假设为row。

柱

自动放置算法通过填充每个列来放置项目打开,根据需要添加新列。