Двухколонный макет карты для настольного и мобильного

Question

Вот моя скрипка: 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;
}

Answer 1

Вот модель с базовым CSS.

Здесь важно знать, что такое двойной flexbox; один flexbox для карт (img / абзац) и один flexbox для всех карт, с flex-wrap: wrap;, чтобы убедиться, что они делают свою работу правильно.

Я использую этот шпаргалку 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>

edit: я только что сделал правку скрипки с серым текстом и вертикально центрированными абзацами:)

Answer 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);
}