Адаптивный макет CSS Grid с автоподгонкой и минимальным количеством элементов - PullRequest
Новая
       16

Адаптивный макет CSS Grid с автоподгонкой и минимальным количеством элементов

0 голосов
/ 14 января 2019

Чего я пытаюсь достичь:

Есть 4 элемента сетки. При максимальном размере экрана я бы хотел, чтобы элементы располагались в ряд:

item_1 item_2 item_3 item_4

Поскольку ширина экрана уменьшается, я бы хотел, чтобы элементы переносились в следующий ряд следующим образом:

item_1 item_2

item_3 item_4

Тогда, наконец, в самом узком, я бы хотел, чтобы время было одним столбцом

item_1

item_2

item_3

item_4

Я нашел пример, который делает это, но только оборачивает следующий элемент, когда это возможно - https://labs.jensimmons.com/2017/03-009.html

Построение этого я пытался использовать вложенные контейнеры сетки на основе модели примера: 

grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));

HTML 

<div class="outer_grid">
  <div class="grid">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>
  <div class="grid">
    <div class="item">item 3</div>
    <div class="item">item 4</div>
  </div>
</div>

CSS 

.outer_grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  grid-template-row:1fr 1fr;
  grid-gap:1em;
  border:5px solid blue;
}

.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-row:1fr 1fr;
  grid-gap:1em;
  border:5px solid green;
  height:200px;
}

.item {
  border:2px solid red;
}

Это почти работает (см. Ниже), но я не уверен, что это правильный подход или есть лучший способ сделать это. Я тоже пытался использовать Flexbox, но выбрал CSS Grid из-за функции разрыва сетки. Кроме того, я знаю, что это можно сделать, но я пытаюсь сделать это без медиа-запросов.

https://codepen.io/anon/pen/LMqWEr?editors=1100

1 Ответ

0 голосов
/ 15 января 2019

Итак, насколько я понимаю, вы на самом деле ищете ряд элементов, которые должны быть преобразованы в столбец или несколько столбцов элементов при сжатии без использования медиазапросов.

Принимая это во внимание, лучшим подходом будет использование Flexbox , поскольку он 1-мерный .

CSS Grid также является мощным, но только если вы хотите использовать 2-мерное макет (то есть строки и столбцы).

Также полезно знать, что Flexbox является контент-первым , а не CSS Grid , layout-first .

Codepen 

.flex-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-container .flex-item {
    display: flex;
    min-width: 10rem;
    width: calc((100% - 1rem * 8 * 2) / 8);
    height: 10rem;
    padding: 1rem;
    margin: 1rem;
    align-items: center;
    justify-content: center;
    background: #1d1d1d;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
}
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
</div>
...