Как реализовать такой блок?
Всем привет!
Посоветуйте, пожалуйста, как лучше реализовать такой блок?
Контента в каждом блоке может быть разное количество, поэтому нужно гибкое решение
Возможно встречали примеры такой реализации?
Буду благодарен за ответы!
Дополнительно:
Evgenii,
точность и гибкость с макетом мне удалось получить таким образом
<ul class="block"> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> </ul> |
<ul class="block"> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> <li class="block__item"></li> </ul>
.block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .block__item:nth-child(1) { padding-top: 200px; } .block__item:nth-child(2) { padding: 100px 0; } .block__item:nth-child(3) { padding-bottom: 200px; } .block__item:nth-child(5) { margin-top: -100px; } .block__item:nth-child(6) { margin-top: -200px; } |
.block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .block__item:nth-child(1) { padding-top: 200px; } .block__item:nth-child(2) { padding: 100px 0; } .block__item:nth-child(3) { padding-bottom: 200px; } .block__item:nth-child(5) { margin-top: -100px; } .block__item:nth-child(6) { margin-top: -200px; }
скорее всего есть вариант проще и более правильный
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания блока с подсветкой синтаксиса кода на сайте можно использовать тег
. Этот тег позволяет указать язык программирования, на котором написан код, и автоматически осуществляет подсветку синтаксиса для этого языка. Пример использования тега <pre lang="php">: <pre lang="php">
В данном примере мы используем язык программирования PHP. Код между открывающим и закрывающим тегом