Позиционирование images
Всем привет. Не могу понять как можно спозиционировать и выставить картинки как на примере. В голову лезет только обвернуть выборочно в div и в ручную расставить с помощью марджинов. Но не уверен, что это верное решение. Может кто то помочь?
Ответы (1 шт):
Автор решения: puffleeck
→ Ссылка
самый простой и гибкий вариант - используйте
display: grid;
#my_grid{display: grid;
grid-template-column: repeat(7, 1fr);/* количество столбиков в grid контейнере */
grid-template-row: repeat(7, 1fr);}
b{background: #aaaadd;}
b:hover{background: #aaddaa;}
.only_column5{grid-column: 5} // как на счет того чтобы привязать класс к столбику?<div id='my_grid'>
<b>1ый элемент. он не имеет привязки к столбцам и строкам, потому помещается в начало таблицы</b>
<b>2й элемент так же без привязок, наглядно демострирует приоритеты направлений
(сначала заполняются столбцы слева направо, когда все столбцы первой строки заняты,
идет переход на следующую строку)</b>
<b style='grid-column:6'>3й элемент с привязкой с 6му столбцу</b>
<b>4й элемент без привязок, вставляется по порядку за 6ым</b>
<b>5й элемент</b>
<b>6й</b>
<b style='grid-column:3; grid-row:4'>7й привязка: column3 row4</b>
<b class='only_column5'>8й</b>
<b class='only_column5'>9й</b>
<b class='only_column5'>10й</b>
<b style='grid-column:4'>11й привязка row4</b>
<b style='grid-column-start: 1; grid-column-end: 7;'>12й. еще можно растянуть один элемент на всю строку</b>
</div>к тому же есть не только координатные, но и буквенные грид-шаблоны. чередуя все выше перечисленные способы, можно размазывать контент по гриду весьма интересными образами =) и конечно можно создать несколько шаблонов, а после посредством например скриптов переключать контейнер между ними
#abc{grid-template-column: repeat(7, 1fr);}
#abc ~ input:checked{grid-template-column: repeat(20, 1fr);}
но стоит отметить, что смена позиции элемента в гриде плохо дружит с анимацией.