2

Задавая grid-template-columns значение например, repeat(auto-fill, minmax(280px, 1fr)); мы предполагаем, что родительский контейнер будет всегда оставлять нам не менее 280px (а иначе произойдёт переполнение контейнера). В реальности, разрабатывая компонент, мы не можем знать, какую ширину оставит нам родительский контейнер.

В этом примере, верхний макет с красноватым фоном демонстрирует обычный грид, которой нормально отображается на относительно широких экранах. Нижний макет с желтоватым фоном имитирует узкие экраны, при этот содержит в себе тот же самый грид. Как видно, элементы грида вылезают за пределы компоновки.

введите сюда описание изображения

Практический пример: grid со свойством grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) перестал влезать в экран, когда паддинги (обозначены зелёным цветом) сделали побольше:

введите сюда описание изображения

Честно говоря, тут я даже не знаю, как концептуально решить проблему, если нам нужно, чтобы элементы растягивались и сжимались по мере изменения ширины экрана... Какие-нибудь существуют походы для решения этой проблемы?

.layout1 {
  background: #FAE5D3;
}

.layout2 {
  width: 230px;
  background: #FCF3CF;
  margin-top: 12px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px
}

.grid-item {
  background: #73C6B6;
  height: 200px;
}
<div class="layout1">
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</div>

<div class="layout2">
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</div>

5
  • 1
    Если это построение небольших карточек как в Google keep то они это сделали через js иной способ я пока еще не видел. Видел только как делают уже с имеющимися данными
    – Locker
    Commented 11 апр. 2021 в 5:26
  • Или же можешь почитать тут: css-live.ru/articles/kak-rabotaet-funkciya-minmax.html Думаю больше всего подходит auto
    – Locker
    Commented 11 апр. 2021 в 5:30
  • 1
    Напишите короткий сниппет для демонстрации вашей проблеммы, пожалуйста Commented 12 апр. 2021 в 6:03
  • Поддерживаю предыдущий комент. Пишите сниппет. С ваших слов ничего не понятно. Помимо функции minmax() есть еще функции min() и max(), которые пока еще работают и их можно комбинировать. Что-то вроде repeat(auto-fill, minmax(min(280px, .8vw), 1fr));. Мне даже очень сложно предположить, где бы пригодилась подобная конструкция. Остальные проблемы с различными экранами можно решить медиа-запросами.
    – DiD
    Commented 14 апр. 2021 в 12:22
  • @ДавидМанжула, добавил. Commented 15 апр. 2021 в 0:42

1 ответ 1

3
+50

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

Можно использовать 4 подхода.

  1. Лобовой. Задать родителю атрибут min-width, чтобы он не сжимался больше допустимого.

  2. Программистский. Использовать Javascript. Обработчик onresize вычисляет размер видимой области и из каких-то соображений форматирует содержимое страницы. Метод работает гарантированно, но бывает очень трудоёмко.

  3. Избыточный. Использовать несколько заранее разработанных форматов элементов для страниц разной ширины и переключать их видимость в зависимости от ширины экрана. В вашем случае я бы сделал несколько вариантов вёрстки. Для узких экранов - в одну колонку. Для экранов пошире - в две. Для совсем широких - четыре. Условия для @media min-width считал бы из тех соображений, чтобы сами карточки выглядели красиво, и их дизайн был бы одинаковым для всех типов экранов.

Это несколько оверкилл в плане трафика, зато легко сделать. Оно как бы нехорошо, что вы отдаёте клиенту три копии одной и той же информации. Но с другой стороны, каналы связи сейчас безразмерные, десяток килобайт туда-сюда не играют роли.

  <style>
  .cell { display: inline; }
  @media only screen and (max-width: 900px) {
    .mobile-layout { display: block; }
    .tablet-layout { display: none; }
    .desktop-layout { display: none; }
  }
  @media only screen and (min-width: 900px) {
    .mobile-layout { display: none; }
    .tablet-layout { display: block; }
    .desktop-layout { display: none; }
  }
  @media only screen and (min-width: 1200px) {
    .mobile-layout { display: none; }
    .tablet-layout { display: none; }
    .desktop-layout { display: block; }
  }
  </style>
<div class="mobile-layout">
 <div class="grid">
  <div class="row">
    <div class="cell">1</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
  </div>
  <div class="row">
    <div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div>
  </div>
 </div>
</div>

<div class="tablet-layout">
 <div class="grid">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
  </div>
  <div class="row">
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
 </div>
</div>

<div class="desktop-layout">
 <div class="grid">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
 </div>
</div>
  1. Мейнстреймовый. Использовать bootstrap. Он за счёт игры с fluid атрибутами может делать так, что на широких экранах ячейки таблиц будут выстраиваться во всю ширину, а по мере сужения будут "тонуть" на следующую строку.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
div { border: 1px black solid;}
</style>
</head>
<body>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
</body>
</html>

У них строка разбита на 12 колонок, номер в имени класса обозначает, сколько колонок занимает ячейка. Суффикс 'xs', 'sm', 'md' и 'lg' указывают, к какому виду экранов эта ширина относится. Например, <div class="col-xs-6 col-md-4"> означает, что на очень узком экране эта ячейка занимает 6 колонок, то есть 50% от ширины строки, а на умеренно широком дисплее - 4 колонки, или 33% ширины строки. Кроме того, xs ячейки никогда не перескакивают на следующую строку при сжатии окна, а остальные классы перескакивают, как только перестают помещаться в свой минимальный размер. Свойства классов указаны в таблице

Соответственно, вы могли бы использовать bootsrap у себя вот так:

<div class="mytable container-fluid">
  <div class="grid row">
    <div class="grid-item col-md-3"></div>
    <div class="grid-item col-md-3"></div>
    <div class="grid-item col-md-3"></div>
    <div class="grid-item col-md-3"></div>
  </div>
</div>

В этом случае каждая ячейка занимает 25% ширины строки и минимальный размер ячейки 4*62px = 248px. Как только контейнер сжимается настолько, что 25% от его ширины меньше минимального размера ячейки, крайняя ячейка перескочит на следующую строку. По мере сжатия третья, а потом и вторая ячейка отправятся на следующую строку, до тех пор, пока они все не выстроятся вертикально.

Если же вам хочется, чтобы сохранялась симметрия, то группы по две ячейки нужно объединить:

<div class="mytable container-fluid">
  <div class="grid row">
   <div class="col-md-6">
    <div class="grid-item col-md-3"></div>
    <div class="grid-item col-md-3"></div>
   </div>
   <div class="col-md-6">
    <div class="grid-item col-md-3"></div>
    <div class="grid-item col-md-3"></div>
   </div>
  </div>
</div>

в этом случае по мере сжатия первым перескочит на следующую строку элемент .col-md-6 и утащит с собой вложенные в него ячейки.

Вот, как-то так.

Но мне лично больше нравится второй вариант со специализированной вёрсткой под каждый размер. Как-то с ним я себя чувствовал более уверенно, чем с bootstrap. Тот мне всегда казался какой-то чёрной магией.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.