Как выровнять карточки с помощью grid?

Question

Как поставить карточку 1 ровно посередине между карточками 2 и 3?

* { 
   box-sizing: border-box;
}

.grid-container {
    max-width: 940px; /* максимальная ширина контейнера */
    margin: auto; /* центрирование контейнера на странице */
    background-color: lightsteelblue; /* фон */
}

.box-init {
    font-size: larger; /* размер шрифта */
    color: #fff; /* цвет текста */
    border-radius: 5px; /* скругление углов */
    background-color: #2196f3; /* цвет фона */
    border: 1px solid black; /* граница блока */
    padding: 10px; /* внутренние отступы */
    /*  выравнивание текста по центру блока
        с помощью CSS Flexbox  */
    display: flex; 
    align-items: center;
    justify-content: center;
}

.heading {
    grid-area: my-heading;
    width: 340px;
    height: 135px;
}

.card {
    width: 380px;
    height: 525px;
}

.card-1 {
    grid-area: my-card-1;
}

.card-2 {
    grid-area: my-card-2;
}

.card-3 {
    grid-area: my-card-3;
}

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
        "my-heading my-heading my-card-2"
        ". my-card-1 my-card-2"
        ". my-card-1 my-card-3";
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section class="about">
    <div class="grid-container grid">
       <div class="box-init heading">ЗАГОЛОВОК</div>
        <div class="box-init card card-1">КАРТОЧКА 1</div>
        <div class="box-init card card-2">КАРТОЧКА 2</div>
        <div class="box-init card card-3">КАРТОЧКА 3</div>
    </div>
  </section>
</body>
</html>

Answer 1

* { 
   box-sizing: border-box;
}

.grid-container {
    max-width: 940px; /* максимальная ширина контейнера */
    margin: auto; /* центрирование контейнера на странице */
    background-color: lightsteelblue; /* фон */
}

.box-init {
    font-size: larger; /* размер шрифта */
    color: #fff; /* цвет текста */
    border-radius: 5px; /* скругление углов */
    background-color: #2196f3; /* цвет фона */
    border: 1px solid black; /* граница блока */
    padding: 10px; /* внутренние отступы */
    /*  выравнивание текста по центру блока
        с помощью CSS Flexbox  */
    display: flex; 
    align-items: center;
    justify-content: center;
}

.heading {        
    height: 135px;
}

.card {   
    
}

.card-1 {
    grid-row: 2/4;   
}

.card-2 {
    grid-row: span 2;
}

.card-3 {
    grid-row: 3/5;
}

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template: repeat(4,1fr)/1fr 1fr;    
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section class="about">
    <div class="grid-container grid">
       <div class="box-init heading">ЗАГОЛОВОК</div>
        <div class="box-init card card-2">КАРТОЧКА 2</div>
        <div class="box-init card card-1">КАРТОЧКА 1</div>        
        <div class="box-init card card-3">КАРТОЧКА 3</div>
    </div>
  </section>
</body>
</html>

БЛОГ НА HUSL

Как выровнять карточки с помощью grid?

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