适用于桌面和移动设备的两列卡片布局答案

【问题标题】：Two-column card layout for desktop and mobile适用于桌面和移动设备的两列卡片布局
【发布时间】：2019-07-03 23:47:21
【问题描述】：

这是我的小提琴：https://jsfiddle.net/b6q7pmkg/ 我正在尝试实现两列卡片，无论在移动设备还是台式机上，它始终保持两列。所以是这样的：在桌面上：

在移动设备上：

这是我目前所拥有的……但不完全是……

.cardContainer {
  max-width: 30rem;
}

css:

.root {
    display: inline-block;
    width: 100%;
    border: 1px solid rgb(221, 221, 221);
    color: rgb(90, 90, 90);
}

.link {
    vertical-align: bottom;
    text-decoration: none;
    cursor: pointer;
}

.imageContainer{
    display: inline-block;
    vertical-align: top;
    width: 40%;
}

image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.content {
  display: inline-block;
  vertical-align: top;
  width: 60%;
  padding: 1rem;
}

.large .title {
    font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
    font-size: 1.1875rem;
    line-height: 1.263;
    letter-spacing: 0.0125rem;
    font-weight: 700;
}

.body {
    margin-top: 1rem;
    color: rgb(139, 139, 139);
    display: block;
}
.description {
    margin-bottom: 0;
    font-size: inherit;
    margin-top: 1rem;
}

【问题讨论】：

标签： css flexbox grid

【解决方案1】：

Here's 具有基本 css 的模型。

这里要知道的重要一点是双 flexbox；一个 flexbox 用于卡片（img/paragraph），一个 flexbox 用于所有卡片，并带有 flex-wrap: wrap; 以确保他们正确地完成工作。

我使用this flexbox 备忘单来准确记住 flexbox 的工作原理 :)

这是 jsfiddle 代码的副本：

section{
  display: flex;
  flex-wrap: wrap;
}

article{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  width: 300px;
}

<section>
  <article>
    <img src="http://lorempixel.com/150/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/151/100/" />
    <p>
      Some text.
    </p>
  </article>

  <article>
    <img src="http://lorempixel.com/150/101/" />
    <p>
      Some text.
    </p>
  </article>
</section>

编辑：我 just made 用灰色文本和垂直居中的段落编辑小提琴:)

【讨论】：

【解决方案2】：

您也可以使用 CSS Grid 做到这一点：

将你所有的卡片放在<div class="grid-container"> 中，在你的 CSS 中添加以下行：

.grid-container{
 display: grid;
 grid-gap: 20px; /*that's optional, for the space between your cards*/
 grid-template-columns: repeat(auto-fit, 300px);
}

【讨论】：