Как ограничить количество столбцов в больших окнах просмотра с помощью CSS Grid и автозаполнения / подгонки?
Я начинаю работать с CSS Grid, я читал о свойствах, которые помогают повысить отзывчивость; поэтому я пытаюсь построить небольшую сетку из 6 элементов; я хочу, чтобы они отображались как 2 строки на более крупных устройствах, например:
А также, чтобы показать их все сложенными на небольших устройствах, чтобы все было хорошо относительно небольших устройств, я использую auto-fill, поэтому он остается отзывчивым, однако, если я просматриваю страницу на экране ноутбука или настольного компьютера, он может заполнить еще один столбец и в итоге выглядит так:
Это мой код макета display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Есть ли способ сохранить отзывчивое поведение, но также установить максимальное количество столбцов? Любая помощь приветствуется; Если это можно сделать только с помощью медиа-запросов, это нормально, но сначала я пытаюсь найти способы сделать это без их использования. Кроме того, я как бы заставил его работать так, как задумано, установив горизонтальный padding для всего контейнера сетки, чтобы компенсировать размер дополнительного столбца; но опять же, если есть способ получше, я все уши. Спасибо!
Рабочий примерhttps://codepen.io/IvanS95/pen/NEYdxb
Как они не демонстрируют проблему? Прочтите еще раз, я сказал, что хочу, чтобы сетка отображала две строки, как на первом рисунке, вместо того, чтобы заполнять другой столбец и показывать их, как на втором рисунке, но в любом случае спасибо
Не думал, что тени так трудно увидеть, вот и все
Отлично. Так-то лучше,
Добавьте, пожалуйста, рабочий пример ..
Так почему бы не определить количество столбцов и при необходимости использовать медиа-запрос?
@Paulie_D Собственно то, что я сказал в конце описания; Я могу использовать медиа-запросы, я хотел знать, есть ли способ сделать это без media-query
@Wimanicesir добавил пример
Я не совсем уверен (я использую мобильный телефон), но может ли grid-template-columns: repeat(minmax(auto-fill, 3), 260px); решить эту проблему? В моей голове - и имейте в виду, что я еще не пробовал это в коде - он должен использовать 3 как максимальное количество столбцов трех и auto-fill в противном случае.
@DavidThomas пробовал, но не работает, я не думаю, что функцию minmax() можно использовать вместо одного значения там
Вы не могу используете auto-fill с количеством столбцов набор ... это невозможно и не ожидаемое поведение. Если вы знать сколько столбцов хотите, просто определите их. auto-fill сделает именно это ... заполнит доступное пространство и обернет тогда.
В качестве тривиального решения вы можете установить максимальную ширину сетки
@vals это вроде того, что я сделал в конце, я просто установил горизонтальный padding на сетке, чтобы он не помещался только в другой столбец
Ответы 3
Используйте этот синтаксис:
grid-template-columns: 260px 260px 260px;
Или
grid-template-columns: repeat(3,260px);
Вместо этого:
grid-template-columns: repeat(auto-fill, 260px);
Используйте медиа-запросы, чтобы установить меньше столбцов на небольших экранах.
Также, если промежуток между строками и столбцами одинаковый, вы можете использовать сетка.
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class = "container">
<div class = "grid-container">
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
</div>
</div>Подойдет, я просто продолжу использовать функцию repeat(), хотя она мне кажется чище, как в repeat(3, 260px).
Твердая точка @ IvanS95, я собираюсь отредактировать ее для дальнейшего использования :)
Добавьте этот код в свой CSS:
grid-template-columns: auto auto auto;
их нужно просто завернуть отдельно.
<div class = "grid-container">
//grid-items
</div>
<div class = "grid-container">
//grid-items (2nd row)
</div>
наш код стиля работает, пока не завершится grid-container.
В вашем коде белый это html. Другой, тот же CSS должен работать.
.grid-container{
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class = "container">
<div class = "grid-container">
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
</div>
<div class = "grid-container">
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
<div class = "grid-item">
<div class = "card"></div>
</div>
</div>
</div>Это именно то, чего я пытаюсь избежать, идея состоит в том, чтобы иметь возможность обернуть элементы сетки, но в то же время установить максимальное количество элементов в строке; поэтому все они должны быть в одном контейнере, поэтому они обертываются соответствующим образом, не оставляя пустых мест, как в вашем примере
Но @ IvanS95 вы всегда можете установить максимальное количество элементов из grid-template-columns: 260px 260px 260px; или с помощью повторения (где вы можете установить ** максимальное количество элементов **, как вы упомянули, потому что он будет напрямую принимать это количество карточек, доступных в HTML, если скорость отклика не твоя забота. Спасибо
Это было моей точкой зрения, хотя, как я уже упоминал, я хочу иметь максимум 3 столбца, даже если может поместиться больше, но оставьте его отзывчивым, если экран меньше с автозаполнением, так что если 3 не помещаются, они переносятся. Это на мой вопрос
Это и
auto-fillна самом деле не означает «отзывчивый». Я уверен, что есть варианты получше, если вы действительно сможете продемонстрировать проблему.