Я создаю макет сетки, и мне нужна помощь. Вот описание требований.
Я бы хотел, чтобы сетка заполнила все пустые места.
Моя текущая реализация работает с небольшими размерами контейнеров, но переполнение строк не работает с большими размерами.
// Cells cannot be smaller than this value.
$minimum-cell-width: 120px;
.container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax($minimum-cell-width, 1fr));
width: 600px;
}
Это дает мне сетку с 4 ячейками в первой строке и 2 ячейками во второй строке. Мне нужно, чтобы в каждой строке было по 3 ячейки, чтобы заполнить все пустые места.
Я бы не стал увеличивать переменную $minimum-cell-width
(хотя она исправляет).
См. Следующий код для получения дополнительных кодов и подробных примеров:
Как элементы сетки должны знать, сколько элементов вы хотите в строке?
Все, что они знают, это то, что они не могут быть меньше 120 пикселей в ширину, но могут свободно занимать свободное место (в своей дорожке).
Контейнер знает только его ширину. Он не знает, что должны делать предметы. Элементы понятия не имеют, куда вы действительно хотите их поместить, поэтому они возвращаются к своим отношениям с контейнером на основе установленных вами правил.
Макет работает в ваших меньших контейнерах, потому что ширина этих контейнеров хорошо совпадает с минимальной шириной, которую вы установили на дорожках, чтобы ограничить количество элементов в строке равным числом. Но если вы уменьшите минимальную ширину со 120 пикселей до, скажем, 50 пикселей, вы обнаружите ту же проблему, что и с большими контейнерами.
Чтобы ваш макет работал, вам необходимо определить ширину контейнера (как вы уже сделали) а также ширину элементов. (Вы можете сделать это без изменения переменной минимальной ширины.)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.container-widest {
grid-template-columns: repeat(auto-fit, minmax(120px, 25%)); /* new */
width: 700px;
background-color: rgba(200, 0, 0, 0.3);
}
.container-wide {
grid-template-columns: repeat(auto-fit, minmax(120px, 200px)); /* new */
width: 600px;
background-color: rgba(200, 0, 0, 0.3);
}
.container-narrow {
width: 400px;
background-color: rgba(0, 200, 0, 0.4);
}
.container-narrower {
width: 300px;
background-color: rgba(0, 200, 0, 0.4);
}
/* style stuff */
html {
padding: 20px;
font-family: monospace;
}
.container {
margin: 0 auto;
margin-top: 20px;
border-radius: 3px;
}
.cell {
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom-width: 2px;
color: rgba(0, 0, 0, 0.4);
font-size: 26px;
padding: 40px;
text-align: center;
font-weight: 1;
border-radius: 3px;
}
p {
text-align: center;
padding-top: 50px;
}
<p>This should be 4 cells per row, to fill all blank spaces</p>
<div class = "container container-widest">
<div class = "cell">1</div>
<div class = "cell">2</div>
<div class = "cell">3</div>
<div class = "cell">4</div>
<div class = "cell">5</div>
<div class = "cell">6</div>
<div class = "cell">7</div>
<div class = "cell">8</div>
</div>
<p>This should be 3 cells per row</p>
<div class = "container container-wide">
<div class = "cell">1</div>
<div class = "cell">2</div>
<div class = "cell">3</div>
<div class = "cell">4</div>
<div class = "cell">5</div>
<div class = "cell">6</div>
</div>
<p>This one works great</p>
<div class = "container container-narrow">
<div class = "cell">1</div>
<div class = "cell">2</div>
<div class = "cell">3</div>
<div class = "cell">4</div>
<div class = "cell">5</div>
<div class = "cell">6</div>
</div>
<p>This also works great!</p>
<div class = "container container-narrower">
<div class = "cell">1</div>
<div class = "cell">2</div>
<div class = "cell">3</div>
<div class = "cell">4</div>
<div class = "cell">5</div>
<div class = "cell">6</div>
</div>
Пустые места представляют собой незанятые ячейки на существующих дорожках. То, что вы пытаетесь выполнить, не сработает, потому что вы не можете заставить элемент сетки вторгаться в другую дорожку, не установив команду (в отличие от flexbox, где «дорожек» не существует). Вот почему важна точка останова, в которой может произойти оборачивание.
Я не могу заставить это работать с флексом, я думаю, второй ряд растягивается. Похоже, мне нужен JS.
Ага. С flex вы столкнетесь с той же проблемой. Элементы сетки / гибкости оборачиваются там, где им подсказывает математика. Если ваша цель отклоняется от математического расчета, вам нужно ввести другое правило.
Мне все еще нужно просмотреть ваш ответ, но чтобы ответить на ваш первый вопрос .. Теоретически, алгоритм имеет выбор между упаковкой 3 ячеек в строку или 4 + 2. Оба решения приемлемы на основе ограничений в моем исходном css ( Я думаю, 1-2 ячейки в строке тоже приемлемы ..). Я надеялся, что смогу добавить дополнительное ограничение, которое заставит алгоритм предпочитать метод упаковки из трех ячеек. Я заранее не знаю, сколько ячеек у меня будет, только то, что их будет четное число.