Гриды так умеют?

Question

[Антон Литвиненко]

Вот такую как на картинке раскладку можно сделать без оберток дополнительных, еще и чтобы повторялся рисунок бесконечно каждые сколько то там картинок? Типа просто список так разложить

тут картинка

Comments

[Антон Литвиненко]

Предположу, что за базу надо взять 6 колонок

[Ankhena]

Антон Литвиненко, я вижу 4.

Но если хочется, чтобы они были одинаковой ширины, то тогда, да 6.

[Антон Литвиненко]

Ankhena, они умеют в дроби? О_о

[Ankhena]

Антон Литвиненко,
1fr 5fr
и
0.2fr 1fr
дадут одинаковый результат: первая колонка будет в 5 раз уже второй.

Аналогичный вид можно получить с помощью repeat(6, 1fr) и сказав, что первый элемент должен занять 1 колонку, а второй 5.

А ещё можно выравнивать элемент внутри колонки с помощью justify-self и ширины хоть в %. (с рядами аналогично)

Можно в одну ячейку помещать несколько элементов.

В общем, вариантов, как я люблю, много разных))

[Pike Pikovskyy]

Не просто "умеют", а создавались как раз для таких случаев.

[Антон Литвиненко]

Ankhena, я долго сопротивлялся. Пора учить гриды... Иначе какой с меня куратор, если я подам заявку

[Ankhena]

Антон Литвиненко, где игра про них, наверное, уже знаете? (grid garden)

Её, конечно, недостаточно для полного кругозора, но для входа вполне удобно.

Answer 1

[RAX7]

Comments

[Антон Литвиненко]

Спасибо, друг, с твоей помощью будет сэкономлено куча времени

[RAX7]

Антон Литвиненко, пожалуйста =)

Answer 2

[Denis Melnikov]

Можно, у гридов есть шаблоны прям.

Comments

[Антон Литвиненко]

Не слышал

[Denis Melnikov]

Антон Литвиненко, https://developer.mozilla.org/en-US/docs/Web/CSS/g...
тут более подробно

[Антон Литвиненко]

Denis Melnikov, а вот такой шаблон может репититься? Допустим у меня шаблон из 12 картинок, но в реальности их сотня.

[Aetae]

https://stackoverflow.com/a/47040816