Css grid. Как расположить элементы?

Question

.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>

Как реализовать?

Answer 1

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

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>

БЛОГ НА HUSL

Css grid. Как расположить элементы?

Ответы (1 шт):