Source:
https://html.ildar-meyker.ru/html-imba/components.html?tab=tab-grids
Демо:
https://codepen.io/ildar-meyker/pen/BabXxRw
Плагины:
Подключение:
//
Разметка:
//
<div class="grid-logos grid-logos--type-1 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/6.svg" alt="" />
</div>
</div>
</div>
<div class="grid-logos grid-logos--type-2 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/6.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
</div>
<div class="grid-logos grid-logos--type-3 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
</div>
<div class="grid-logos grid-logos--type-4 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
</div>
<div class="grid-logos grid-logos--type-5 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
</div>
<div class="grid-logos grid-logos--type-6 grayscale">
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/1.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/2.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/3.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/4.svg" alt="" />
</div>
</div>
<div>
<div class="grid-logos__image">
<img src="img/temp/logos/5.svg" alt="" />
</div>
</div>
</div>
Стили:
//
.grid-logos {
display: grid;
grid-auto-rows: 11.4rem;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #cccccc;
border-width: 1px 1px 0 0;
> div {
position: relative;
border: 1px solid #cccccc;
border-width: 0 0 1px 1px;
font-weight: bold;
img {
max-width: 14rem;
max-height: 6rem;
}
}
&--type-1 {
}
&--type-2 {
grid-template-columns: repeat(6, 1fr);
> div {
grid-column: span 2;
&:nth-child(7n + 5),
&:nth-child(7n + 6) {
grid-column: span 1;
}
}
}
&--type-3 {
> div {
&:nth-child(8n + 1),
&:nth-child(8n + 2),
&:nth-child(8n + 6),
&:nth-child(8n + 7) {
grid-row: span 2;
}
}
}
&--type-4 {
> div {
&:nth-child(10n + 1),
&:nth-child(10n + 8) {
grid-row: span 2;
}
}
}
&--type-5 {
> div {
grid-row: span 2;
}
}
&--type-6 {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
> div {
&:before {
content: " ";
padding-top: 100%;
display: block;
}
&:nth-child(10n + 1),
&:nth-child(10n + 8) {
grid-row: span 2;
grid-column: span 2;
}
}
}
&__image {
@include fill;
display: flex;
justify-content: center;
align-items: center;
}
}
Инициализация:
//
0 комментариев