Создание несимметричной сетки с помощью Grid Layout

[Finesse]

Вместо классов photo1, photo2 и т.д. можно использовать CSS-селекторы .photo:nth-child(1), .photo:nth-child(2) и т.д… Так HTML-код будет проще.

[ovarn]

Действительно, мне даже не пришло это в голову. Спасибо за замечание!

[Loki3000]

А grid-template-areas был бы не удобнее в этом случае? Вместо того чтобы писать 20 правил, сделали бы одно, да еще и наглядное. Или он так не сможет?

[ovarn]

Он так может. Но пришлось бы создать 52 (13 х 4) именованных области, а потом каждый элемент все равно бы пришлось помещать в выдленную для него область. grid-template-areas очень полезное свойство, но в данном случае (при большом количестве грид-элементов и их несиммитричного расположени) он бесполезен.

[Loki3000]

Зачем 52? У вас же всего 19 изображений.

grid-template-areas:
"g01 g01 g02 g03 g04 g05 g05 g05 g05 g06 g06 g07 g08"
"g01 g01 g09 g10 g10 g05 g05 g05 g05 g06 g06 g11 g12"
"g13 g15 g15 g10 g10 g05 g05 g05 g05 g18 g18 g19 g19"
"g14 g15 g15 g16 g17 g05 g05 g05 g05 g18 g18 g19 g19";

Вот вся ваша сетка — сразу можно посмотреть где что расположено.

PS. более того, если выделить в редакторе один из элементов, редактор тут же подсветит какие еще области этот элемент занимает. А в ваш вариант даже соваться страшно.

[ovarn]

Я это и имел ввиду. Вы создали 52 зоны, 19 из них являются уникальными.

Но вы оказались правы. Ваш вариант намного лучше. Особенно при переопределении сетки в разных брейкпоинтах и, уже упомянутой выше, подстветки в редакторе.

Большое спасибо за совет!