Как разместить один элемент в строке адаптивной сетки?
Я использую сетку для размещения карточек. Сетка адаптивна с использованием minimax и auto-fit:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Но я хотел бы иметь одну карту в первом ряду, чтобы карта не охватывала (т. е. имела ту же ширину, что и карты в следующих строках).
Итак, вот желаемые макеты для 1-3 столбцов (в зависимости от ширины экрана), где x означает «карточка», а . означает «пустое место»:
x
x
x
x .
x x
x x
x . .
x x x
x x x
x x x
Я попытался указать grid-row для второй карточки и далее, но поскольку я заранее не знаю, сколько столбцов там будет (шаблон адаптивной сетки), я не знаю.
Мне понадобится такое свойство, как min-grid-row.
Обновлено:
- Я не могу разместить первый элемент за пределами сетки, потому что хочу, чтобы все карточки имели одинаковую ширину (адаптивную).
Ответы 2
Вы можете приблизиться к этому, поместив псевдоэлемент в строку 1 (здесь он окрашен в синий цвет), который простирается до конечного столбца (с минимальной шириной, соответствующей минимальной ширине столбца).
Затем при наименьшей ширине (скажем) мобильного телефона вы отключите псевдоэлемент в медиа-запросе.
https://codepen.io/Paulie-D/pen/bGPbBNr
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: .5em;
}
.grid:after {
content: "";
grid-row: 1;
grid-column: 2 / -1;
min-width: 250px;
background: lightblue;
}
.item {
border: 1px solid grey;
text-align: center;
}
@media (max-width: 520px) {
.grid::after {
background: pink;
content: none;
}
}<div class = "grid">
<div class = "item">Item 1</div>
<div class = "item">Item 2</div>
<div class = "item">Item 3</div>
<div class = "item">Item 4</div>
<div class = "item">Item 5</div>
<div class = "item">Item 6</div>
<div class = "item">Item 7</div>
<div class = "item">Item 8</div>
<div class = "item">Item 9</div>
<div class = "item">Item 10</div>
<div class = "item">Item 11</div>
<div class = "item">Item 12</div>
</div>Оказывается, есть еще лучший ответ, используя grid-column: 1 для второго ребенка, см. принятый ответ.
Возможно, я что-то упускаю, но похоже, что для второго элемента достаточно установить Grid-column: 1:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: .5em;
}
.item {
border: 1px solid grey;
text-align: center;
}
.item:nth-child(2) {
grid-column: 1;
}<div class = "grid">
<div class = "item">Item 1</div>
<div class = "item">Item 2</div>
<div class = "item">Item 3</div>
<div class = "item">Item 4</div>
<div class = "item">Item 5</div>
<div class = "item">Item 6</div>
<div class = "item">Item 7</div>
<div class = "item">Item 8</div>
<div class = "item">Item 9</div>
<div class = "item">Item 10</div>
<div class = "item">Item 11</div>
<div class = "item">Item 12</div>
</div>работает, фантастический ответ! К вашему сведению, по аналогичной причине я пытался, но не смог использовать grid-row: 2 и не подумал установить для столбца сетки значение 1. Что меня удивляет, так это то, что это похоже на настоящий «разрыв строки», т. е. влияет на последующие элементы даже без установки order. Спасибо!
это то, что я пробовал изначально, но у меня это не сработало, не знаю почему (и я был убежден, что это сработает)
Если вы не используете Grid-auto-flow: Density, после размещения элемента во второй строке пустые места в первой строке не будут использоваться.
выглядит хорошо, приму позже сегодня, если не появится что-то еще. Спасибо!