Если я правильно понял, вы хотите, чтобы при изменении размеров окна браузера элементы страницы переформатировались автоматически без наползания друг на друга.
Можно использовать 4 подхода.
Лобовой. Задать родителю атрибут min-width, чтобы он не сжимался больше допустимого.
Программистский. Использовать Javascript. Обработчик onresize
вычисляет размер видимой области и из каких-то соображений форматирует содержимое страницы. Метод работает гарантированно, но бывает очень трудоёмко.
Избыточный. Использовать несколько заранее разработанных форматов элементов для страниц разной ширины и переключать их видимость в зависимости от ширины экрана. В вашем случае я бы сделал несколько вариантов вёрстки. Для узких экранов - в одну колонку. Для экранов пошире - в две. Для совсем широких - четыре. Условия для @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>
- Мейнстреймовый. Использовать 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. Тот мне всегда казался какой-то чёрной магией.
minmax()
есть еще функцииmin()
иmax()
, которые пока еще работают и их можно комбинировать. Что-то вродеrepeat(auto-fill, minmax(min(280px, .8vw), 1fr));
. Мне даже очень сложно предположить, где бы пригодилась подобная конструкция. Остальные проблемы с различными экранами можно решить медиа-запросами.