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

CSS网格:如何将所有内容放在一行上?

flex grid css

0

Manngo · 技术社区 · 5 年前

也就是说,我想效仿 flex 单行布局。

grid-template-columns: 1fr 1fr 1fr 1fr; 在下面的示例中,但我不想设置特定数量的列。

div#flex {
  display: flex;
  flex-direction: row; /* I know thatâs not necessary */
}
div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
  grid-template-rows: 1fr;
}
div#grid>button {

}

<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

1 回复 | 直到 5 年前

1

0

Aymen TAGHLISSIA 5 年前

你可以加上 grid-auto-flow: column; 相反: https://stackblitz.com/edit/angular-9midxc

div#flex {
  display: flex;
  flex-direction: row; /* I know thatâs not necessary */
}
div#flex>button {
  flex: 1;
}

div#grid {
  display: grid;
   grid-auto-flow: column; 
}
div#grid>button {

}

HTML格式:

<div id="flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>

<div id="grid">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
</div>