如何将卡片垂直排列成两列[重复]答案

【问题标题】：How to arrange cards vertically into two columns [duplicate]如何将卡片垂直排列成两列[重复]
【发布时间】：2019-11-11 21:19:14
【问题描述】：

我需要将以下一组卡片排列成两列，并一个接一个地垂直出现。这样我就可以在移动设备中按顺序安排。

我已经使用 flex 布局来创建它，但是当卡片具有不同的高度时它没有帮助。

<div class="ui container">
  <div class="ui segment">About</div>
  <div class="ui segment">Video</div>
  <div class="ui segment">Experiences</div>
  <div class="ui segment">Preferences</div>
  <div class="ui segment">Skills</div>
  <div class="ui segment">Education</div>
  <div class="ui segment">Projects</div>
</div>

这是Codepen example。

手机设计应该是这样的。

【问题讨论】：

@Paulie_D 适用于左栏中有一张卡片的布局。就我而言，我无法将左侧卡片高度设为 100%。我需要每张卡片一张接一张地排列成两列。
问题是一样的 - 目前没有额外的包装器和display:contents 几乎没有支持是不可能的。 CSS-Grid 无能为力，因为它显然 不是网格。
@Paulie_D 我建议这不是一个重复的问题。这是一个独特的要求。
正如我已经说过的，basic 问题是重复的。这对于您给定的结构是不可能的。 - 检查其他链接。

标签： css layout flexbox css-grid

【解决方案1】：

请使用以下之一：-

引导程序 - https://getbootstrap.com/ 这将为您提供 12 个网格的行列布局。它只是一个css文件。您可以简单地使用 css 类来控制不同屏幕的外观。
媒体查询 -Media Queries

【讨论】：