CSS网格：如何将所有内容放在一行中？

v2g6jxz6 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(183)

我试着更多地使用网格，但是我想不出一个简单的问题是什么。我如何把所有的元素放在一行中？
也就是说，我想模拟单行的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>

css

来源：https://stackoverflow.com/questions/61180545/css-grid-how-do-i-put-everything-on-a-single-row

1条答案

按热度按时间

ws51t4hk1#

您可以直接添加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 {}

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

赞(0）回复(0）举报 2022-12-30

我来回答

CSS网格：如何将所有内容放在一行中？

1条答案

相关问题

热门标签

最新问答