HTMl / CSS：面向列的布局？ [复制]答案

【问题标题】：HTMl / CSS : Column oriented layouts? [duplicate]HTMl / CSS：面向列的布局？ [复制]
【发布时间】：2021-02-09 21:47:35
【问题描述】：

我正在寻求帮助。我们正在重新设计我们的软件系统，并且通过我们的新设计，我们实际上希望将其重点放在列方式上。

我们的客户可以管理他们的 CRM 并创建他们想要用于他们的关系的新字段。我们一直在从左到右工作，但实际上希望从上到下开始。

例如：

1 2 3 4 5 6 7 8 9 10 11 12

现在就是这样。但我们想开始移动到

1 4 7 10 2 5 8 11 3 6 9 12

我们使用 bootstrap 4，但我还没有找到一种方法来做到这一点，纯粹使用 HTML 和 CSS。一直在看 display:grid，但还没有找到适合我们的解决方案。最大的问题是，它应该是灵活的。所以我不想使用固定的高度和高度。

有人能把我推向正确的方向吗？甚至有一个很好的解决方案吗？我们需要支持最流行的浏览器，至少我们也希望支持 IE 11。

[编辑]

一些额外的信息。我一直在尝试使用 display:flex，但我遇到了下一个问题。

当一个项目比其他项目大时，同一行的项目获得该项目的高度，但它应该只是用其他项目填充空间。例如：

这是我得到的：

1 4 5 2 3 6 3 4 7

这就是我想做的事情

1 4 10 5 11 6 7 13 2 8 14 3 9

【问题讨论】：

您打算从头开始编写代码还是重新构建当前结构？如果是后者，请发布现有代码。无论哪种方式，如果您尝试的帖子没有发布，这可能会吸引反对票。

标签： html css flexbox css-grid

【解决方案1】：

如果您在标记时已经使用 CSS-Grid，您也可以简单地使用 grid-auto-flow: column; 并按照我的 sn-p 所示实现该示例。

.grid {
  display: grid;
  grid-auto-columns: min-content;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  grid-auto-flow: column;
  text-align: right;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

【讨论】：

感谢您的回答。也一直在尝试使用它，但是我对此有疑问，我不知道解决方案。当第 1 项大于其他项时，4、7 和 10 的高度与第 1 项相同，但它应该采用自己的高度。有什么可做的吗？（查看编辑后的第 1 篇文章了解更多信息）

【解决方案2】：

你可以使用弹性盒子。

section {
height:280px;display:flex;flex-wrap:wrap;
flex-direction:column;width:280px}

div {
background:lightblue;width:50px;height:50px;margin:10px;
display:flex;align-items:center;justify-content:center;}

<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>

【讨论】：

【解决方案3】：

试试

display: flex; 
flex-direction: column;

并调整列/行的宽度。

【讨论】：