Как сверстать такую сетку?
Здравствуйте. Глаза замылились уже, подскажите, как лучше сверстать такую сетку?
Проблема в расстоянии второй колонки.
Можно было бы на две колонки разделить и у второй дать margin сверху, но на мобильных устройствах блоки ставятся один за другим.
Пробывал флексом, и сдвигом top в position:relative, но флекс держит сетку между блоками, поэтому расстояния получаются не те, что нужны:
.block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .block-item { width: calc(50% - 10px); } .block-item:nth-child(2n) { position: relative; top: 125px; } |
.block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .block-item { width: calc(50% - 10px); } .block-item:nth-child(2n) { position: relative; top: 125px; }
Сейчас просто 2,4,6 элемент сдвинул так же ( position: relative; ), но для каждого свой top.
Если ли лучше решение?
Дополнительно:
Можно было бы на две колонки разделить и у второй дать margin сверху, но на мобильных устройствах блоки ставятся один за другим.
Добавьте медиа-запрос на width, чтобы скорректировать на одноколоночном варианте.
Ответы:
Сетка в две колонки, где каждая карточка занимает два ряда, карточки во втором со сдвигом на один ряд
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для верстки сетки на веб-странице можно использовать различные подходы и технологии. Один из наиболее распространенных способов - использование CSS Grid или Flexbox.
Вот пример верстки сетки с использованием CSS Grid:
.grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid black; text-align: center; padding: 20px; font-size: 30px; } <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div>.grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid black; text-align: center; padding: 20px; font-size: 30px; } <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div>
В данном примере мы создаем контейнер с классом "grid-container" и дочерние элементы с классом "grid-item". Мы используем свойство display: grid для контейнера, чтобы создать сетку с тремя колонками (grid-template-columns: auto auto auto) и задаем расстояние между элементами с помощью свойства grid-gap.
Для каждого элемента сетки мы задаем стили, такие как цвет фона, рамка, выравнивание текста и размер шрифта.
Это лишь простой пример использования CSS Grid для создания сетки на веб-странице. Вы также можете использовать Flexbox или другие технологии для верстки сетки, в зависимости от ваших потребностей и предпочтений.