Мітка: Ручний відкіт |
|||
| Рядок 1: | Рядок 1: | ||
{{#css: | {{#css: | ||
. | .flex-container { | ||
display: | display: flex; | ||
flex-wrap: wrap; | |||
gap: 40px; | gap: 40px; /* Отступ между карточками */ | ||
padding: 0 32px; | justify-content: center; /* Выравнивание по центру */ | ||
padding: 0 32px; /* Отступы по бокам */ | |||
margin: 40px auto; | margin: 40px auto; | ||
} | } | ||
.mainpage-card { | .mainpage-card { | ||
flex: 1 1 480px; /* Базовая ширина 480px, карточка может сжиматься и расти */ | |||
max-width: 480px; /* Максимальная ширина карточки */ | |||
background: #f6f6f6; | background: #f6f6f6; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
| Рядок 63: | Рядок 66: | ||
}} | }} | ||
<div class=" | |||
<div class="flex-container"> | |||
{{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | ||
{{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }} | {{#if: {{{2|}}} | <div class="mainpage-card">{{{2}}}</div> }} | ||
{{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }} | {{#if: {{{3|}}} | <div class="mainpage-card">{{{3}}}</div> }} | ||
<!-- и т.д. --> | |||
</div> | </div> | ||