Comments 6
Вместо классов photo1, photo2 и т.д. можно использовать CSS-селекторы .photo:nth-child(1), .photo:nth-child(2) и т.д… Так HTML-код будет проще.
А grid-template-areas был бы не удобнее в этом случае? Вместо того чтобы писать 20 правил, сделали бы одно, да еще и наглядное. Или он так не сможет?
Он так может. Но пришлось бы создать 52 (13 х 4) именованных области, а потом каждый элемент все равно бы пришлось помещать в выдленную для него область. grid-template-areas очень полезное свойство, но в данном случае (при большом количестве грид-элементов и их несиммитричного расположени) он бесполезен.
Зачем 52? У вас же всего 19 изображений.
Вот вся ваша сетка — сразу можно посмотреть где что расположено.
PS. более того, если выделить в редакторе один из элементов, редактор тут же подсветит какие еще области этот элемент занимает. А в ваш вариант даже соваться страшно.
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. более того, если выделить в редакторе один из элементов, редактор тут же подсветит какие еще области этот элемент занимает. А в ваш вариант даже соваться страшно.
Sign up to leave a comment.
Создание несимметричной сетки с помощью Grid Layout