2

.what_is {
    margin: 341px 40px 197px 40px;
    text-align: center;
}

.t_what_is {
    max-width: 1318px;
    margin: 0 auto;

    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 36px;
    color: #fff;
}

.cards_what_is {
    display: grid;
    justify-content: center;
    grid-template-columns: 398px 398px 398px;
    grid-gap: 20px;
}

.card_what_is_all {
    background: #3C4070;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.14);
    border-radius: 7px;
}

.card_what_is_1 {
    width: 398px;
    height: 219px;
}

.card_what_is_2 {
    width: 398px;
    height: 218px;
}

.card_what_is_3 {
    width: 398px;
    height: 330px;
}

.card_what_is_4 {
    width: 398px;
    height: 330px;
}

.card_what_is_5 {
    width: 398px;
    height: 330px;
}

.card_what_is_6 {
    width: 398px;
    height: 219px;
}
<div class="what_is">
    <div class="t_what_is">В чём смысл</div>
    <div class="cards_what_is">
            <div class="card_what_is_all card_what_is_1">
                
            </div>
            <div class="card_what_is_all card_what_is_2">
                
            </div>
            <div class="card_what_is_all card_what_is_3">
            
        </div>

        <div class="card_what_is_all card_what_is_4">
            
        </div>
        <div class="card_what_is_all card_what_is_5">
            
        </div>
        <div class="card_what_is_all card_what_is_6">
            
        </div>
    </div>
</div>

Как реализовать? введите сюда описание изображения

1 ответ 1

4

Для этого макета, раскладка будет примерно такая:

body { margin: 0; background-color: #202245; }

.what_is { text-align: center; /*margin: 341px 40px 197px 40px;*/ }

.t_what_is {
  max-width: 1318px;
  margin: 40px auto;
  font: bold normal 36px/36px Roboto;
  color: #fff;
}

.cards_what_is {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 400px);
  grid-template-rows: repeat(5, 110px);
  grid-template-areas: "cell-1-1 cell-1-2 cell-1-3" "cell-1-1 cell-1-2 cell-1-3" "cell-2-1 cell-2-2 cell-1-3" "cell-2-1 cell-2-2 cell-2-3" "cell-2-1 cell-2-2 cell-2-3";
  grid-gap: 20px;
  counter-reset: num;
}

.card_what_is_all {
  position: relative;
  border-radius: 7px;
  background-image: radial-gradient(circle closest-corner at 50% 0%, #0000 10%, #3C4070 11%);
  filter: drop-shadow(0px 4px 10px #0008);
}
.card_what_is_all::before {
  counter-increment: num;
  content: counter(num);
  position: absolute;
  bottom: 100%; left: 50%;
  width: 10%;
  transform: translate(-50%, 50%);
  font: bold 28px Arial;
  color: #808795;
}

.card_what_is_1 { grid-area: cell-1-1; }
.card_what_is_2 { grid-area: cell-1-2; }
.card_what_is_3 { grid-area: cell-1-3; }
.card_what_is_4 { grid-area: cell-2-1; }
.card_what_is_5 { grid-area: cell-2-2; }
.card_what_is_6 { grid-area: cell-2-3; }
<div class="what_is">
  <div class="t_what_is">В чём смысл</div>
  <div class="cards_what_is">
    <div class="card_what_is_all card_what_is_1"></div>
    <div class="card_what_is_all card_what_is_2"></div>
    <div class="card_what_is_all card_what_is_3"></div>
    <div class="card_what_is_all card_what_is_4"></div>
    <div class="card_what_is_all card_what_is_5"></div>
    <div class="card_what_is_all card_what_is_6"></div>
  </div>
</div>

6
  • А что если эти блоки к примеру картинки и они пополняются из БД, то есть их бесконечно! Как быть в таком случае? А именно, что использовать из функций для гридов. И ещё один более важны (для меня) вопрос - Нормально ли будет если я расставлю эти блоки с помощью позишинов?
    – markus
    1 дек 2020 в 17:56
  • @markus: расставить Вы их расставите позишинами, но сами же говорите, что блоков бесконечно много - каждый будете расставлять? А, если ориентация экрана сменится или размер? Все эти флексы-гриды для того и придуманы, чтобы максимально автоматизировать, упростить и упорядочить раскладки. Так что, если хотите аккуратно разложить блоки, а точное их количество и размеры неизвестны, то стоит посмотреть в сторону JS-библиотеки Masonry.
    – UModeL
    1 дек 2020 в 18:27
  • А подойдёт ли ещё такой вариант с флексами (если не особо много блоков)?: с помощью флексов расставить все блоки и чтобы добиться такого эффекта - imgur.com/a/L7KHEs4 просто прописать для 4-5 блоков margin: -100px;
    – markus
    1 дек 2020 в 18:32
  • @markus: гриды будут чуть мощнее флексов. В общем, у Вас такая задача, что хочешь не хочешь, а нужно глубже изучить эти техники.
    – UModeL
    1 дек 2020 в 18:42
  • Нормально ли, что я буду использовать masonry не для картинок, а для таких блоков как в вопросе например?
    – markus
    2 дек 2020 в 15:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.