CSS Grid - Responsive - Несколько строк из 3 столбцов в 2 строки столбцов

Question

Я создаю страницу с несколькими строками с сеткой из 3 столбцов, но в планшете измените ее на сетку с 2 столбцами и мобильную сетку с 1 столбцом.

В Tablet при создании сетки из 2 столбцов в конце создается пустой столбец.

Можно ли соединить обе строки, чтобы вторая занимала пустое место в первой строке?

Или единственный шанс, что столбцы организованы в одну строку?

<div class="block-container grid-3-cols_wrapper">
   <!-- Row 1 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

   <!-- Row 2 -->
   <div class="has-3-columns">
      <!-- Col 1 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 2 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>

      <!-- Col 3 -->
      <div class="block-column">
         <div><img src="..." alt=""></div>
      </div>
</div>

Answer 1

Тебе наверняка будет лучше с Flex. Flex это ... более гибкий. Где, как Гри это обычно набор макета.

.flex-grid {
  display: flex;
}
.flex-grid .col {
  flex: 1;
}

.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background-color: #135;
  color: white;
  font-family:Verdana, Geneva, sans-serif;
  font-size: 150%;
  margin: 0px 5px 5px 5px;
  border-radius: 5px;
  padding: 20px;
}
   

 <div class="flex-grid">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
  <div class="col">Column D</div>
</div>

<div class="flex-grid">
  <div class="col">Column E</div>
  <div class="col">Column F</div>
  <div class="col">Column G</div>
</div>

<div class="flex-grid">
  <div class="col">Column H</div>
  <div class="col">Column I</div>
</div>

<div class="flex-grid">
  <div class="col">Column J</div>
</div>

Надеюсь, это поможет! Теперь все, что вам нужно, это ваши запросы @Media для экрана определенных размеров.

Answer 2

Надеемся, что это приведет вас в правильном направлении.

Я сделал CSS, чтобы он был мобильным. Итак, первый медиа-запрос предназначен для планшетов, второй - для настольных ПК, а width: 100% - для мобильных устройств, поэтому, очевидно, будет отображаться один столбец. Вы можете изменить это, чтобы удовлетворить то, что вам нужно. Поиграйте с ним и комментируйте любые вопросы, и я посмотрю:)

Подход FlexBox

flex-direction Свойство CSS flex-direction устанавливает, как элементы flex размещаются в контейнере flex, определяя главную ось и направление (нормальное или обратное). Посмотрите примеры здесь

flex-flow Свойство flex-flow CSS является сокращенным свойством для свойств flex-direction и flex-wrap. Прочитайте здесь

justify-content Свойство CSS justify-content определяет, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль главной оси гибкого контейнера и встроенной оси контейнера сетки. Прочитайте здесь

.grid-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.grid-item {
  display: flex;
  background-color: orange;
  width: calc(100% - 10px);
  margin: 5px
}

@media (min-width: 720px) {
  .grid-item {
    width: calc(33.333% - 10px);
  }
}

@media (min-width: 1020px) {
  .grid-item {
    width: calc(25% - 10px);
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

Помните, что если вы измените значение маржи на 20px, вам также придется изменить значение width, так как оно делает это:

width: calc(grid-item-desired-width% - margin);

Я бы действительно рекомендовал прочитать ссылку выше, поскольку все они имеют интерактивные демонстрации, которые дадут вам наглядный пример того, как работают эти свойства flexbox. Я также рекомендовал бы просто поиграть с flex-box и, возможно, попробовать разные значения, чтобы увидеть, как они действуют на вашей сетке. Это лучший способ выучить это и застрять в голове. Надеюсь, вы найдете это полезным.

Подход CSS Grid

Другой способ - использование CSS Grid. Не был уверен, какой путь ты хочешь, но я лично пошел бы с flexbox. В случае, если вы хотите, чтобы это было ниже, используется CSS-сетка

.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  grid-gap: 10px 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

@media (min-width: 720px) {
  .grid-container {
    grid-template-columns: auto auto auto;
  }
}

@media (min-width: 1020px) {
  .grid-container {
    grid-template-columns: auto auto auto auto;
  }
}

<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>