как расположить при помощи grid неопределённое кол-во элементов в 2 ряда
Подскажите как расположить при помощи grid неопределённое кол-во колонок( собственно и элементов) в 2 ряда
Пытаюсь так делать:
grid-template-columns: repeat(auto-fill, 150px);
grid-template-rows: repeat(2, 300px);
оно просто в одну строку их суёт
или как в целом решить такую задачку.
Ответы (2 шт):
Автор решения: Qwertiy
→ Ссылка
Если устраивает смена направления, то можно так:
main {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, 2em);
gap: 1em;
}
div {
background: silver;
line-height: 2em;
text-align: center;
}<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</main>
Автор решения: Qwertiy
→ Ссылка
Я бы прописал в стилях количество элементов.
Следующий код работает как минимум в Chrome 131 и FF 133, хотя, вообще-то меня смущает дробное число колонок...
main {
display: grid;
grid-template-columns: repeat(calc(var(--n) / 2), 1fr);
grid-template-rows: repeat(2, 2em);
gap: 1em;
margin-bottom: 2em;
}
div {
background: silver;
line-height: 2em;
text-align: center;
}<main style="--n: 9">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</main>
<main style="--n: 4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</main>Если позволяет поддержка браузерами, я бы написал явно с округлением round:
main {
display: grid;
grid-template-columns: repeat(round(up, var(--n) / 2, 1), 1fr);
grid-template-rows: repeat(2, 2em);
gap: 1em;
margin-bottom: 2em;
}
div {
background: silver;
line-height: 2em;
text-align: center;
}<main style="--n: 9">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</main>
<main style="--n: 4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</main>Впрочем, можно прописывать сразу число колонок - тогда и вопросов меньше:
main {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(2, 2em);
gap: 1em;
margin-bottom: 2em;
}
div {
background: silver;
line-height: 2em;
text-align: center;
}<main style="--cols: 5">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</main>
<main style="--cols: 2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</main>