Отображать контент с сеткой

Question

Я новичок в дизайне внешнего интерфейса и хотел бы, чтобы кто-то помог мне с настройкой сетки, которую я не могу понять.Я хотел бы установить поля с функцией display: grid, как показано на примере изображения.Эти коробки будут позже содержать контент.Может кто-нибудь, пожалуйста, помогите мне, потому что я не могу понять это.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    }
    
.container {
    width: 80%;
    margin: 0 auto;
}

.grid {
    padding: 50px 0;
    display: grid; 
    grid-gap: 15px;
}

.box_a {
    background: gray;
    padding: 20px 40px;
}

.box_b {
    background: black;
    color: white;
    padding: 20px 40px;
    
}

.box_c {
    padding: 20px 40px;
    background: lightblue;
}

.b1 {
    grid-area: 1 / 1 / 2 / 2;
}

.b2 {
    grid-area: 1 / 2 / 2 / 5;
}

.b3 {
    grid-area: 2 / 1 / 3 / 5;
}

.b4 {
    grid-area: 3 / 1 / 2 / 5;
}

.b5 {
    grid-area: 3 / 1 / 4/ 5;
}

 <section class="main">
        <div class="container grid">
            <div class="box_a b1">
                <h2>What we do</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
                <a href="#">Povezava nekam</a>
            </div>

            <div class="box_b b2">
                <h2>How we do it</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
                <a href="#">Povezava nekam</a>
            </div>

            <div class="box_c b3">
                <div class="post_top">
                    <a href="#">Povezava prispevka</a>
                    <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
                </div>
                <div class="post_bottom">
                    <h2>Nek podnaslov</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
                </div>
            </div>

            <div class="box_a b4">
                <a href="#">Povezava nekam</a>
                <h2>Lorem Ipsum</h2>
                <a href="#">Preberi več</a>
            </div>

            <div class="box_b b5">
                <a href="#">Povezava nekam</a>
                <h2>Nek srednje dolg naslov</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
            </div>
        </div>
    </section>

Answer 1

Вы можете упростить вашу сетку, как показано ниже, без необходимости использования областей сетки:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  padding: 50px 0;
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 15px;
}

.box_a {
  background: gray;
  padding: 20px 40px;
}

.box_b {
  background: black;
  color: white;
  padding: 20px 40px;
}

.box_c {
  padding: 20px 40px;
  background: lightblue;
}

.b2,.b5 {
  grid-column:2/span 2;
}

.b3 {
  grid-column:1/span 3;
}

<section class="main">
  <div class="container grid">
    <div class="box_a b1">
      <h2>What we do</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_b b2">
      <h2>How we do it</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_c b3">
      <div class="post_top">
        <a href="#">Povezava prispevka</a>
        <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
      </div>
      <div class="post_bottom">
        <h2>Nek podnaslov</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
      </div>
    </div>

    <div class="box_a b4">
      <a href="#">Povezava nekam</a>
      <h2>Lorem Ipsum</h2>
      <a href="#">Preberi več</a>
    </div>

    <div class="box_b b5">
      <a href="#">Povezava nekam</a>
      <h2>Nek srednje dolg naslov</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
    </div>
  </div>
</section>

Соответствующий код:

.grid {
  ...
  grid-template-columns:1fr 1fr 1fr; /*define 3 columns*/
  ..
}

.b2,.b5 {
  grid-column:2/span 2; /*take 2 colmuns starting from 2*/
}

.b3 {
  grid-column:1/span 3; /*take 3 columns starting from 1*/
}

Answer 2

Ваши grid-areas немного запутаны - измените ваши grid-area определения для b4 на grid-area: 3 / 1 / 4 / 2 и b5 на grid-area: 3 / 2 / 4/ 5.

Обратите внимание на использование из grid-area при использовании линий сетки :

Если указано четыре значения, grid-row-start-startустанавливается на первое значение, grid-column-start устанавливается на второе значение, grid-row-end устанавливается на третье значение, а grid-column-end устанавливается на четвертое значение.

MDN

См. Исправленную демонстрацию ниже:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.grid {
  padding: 50px 0;
  display: grid;
  grid-gap: 15px;
}

.box_a {
  background: gray;
  padding: 20px 40px;
}

.box_b {
  background: black;
  color: white;
  padding: 20px 40px;
}

.box_c {
  padding: 20px 40px;
  background: lightblue;
}

.b1 {
  grid-area: 1 / 1 / 2 / 2;
}

.b2 {
  grid-area: 1 / 2 / 2 / 5;
}

.b3 {
  grid-area: 2 / 1 / 3 / 5;
}

.b4 {
  grid-area: 3 / 1 / 4 / 2; /* CHANGED */
}

.b5 {
  grid-area: 3 / 2 / 4 / 5; /* CHANGED */
}

<section class="main">
  <div class="container grid">
    <div class="box_a b1">
      <h2>What we do</h2>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_b b2">
      <h2>How we do it</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
      <a href="#">Povezava nekam</a>
    </div>

    <div class="box_c b3">
      <div class="post_top">
        <a href="#">Povezava prispevka</a>
        <h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
      </div>
      <div class="post_bottom">
        <h2>Nek podnaslov</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
      </div>
    </div>

    <div class="box_a b4">
      <a href="#">Povezava nekam</a>
      <h2>Lorem Ipsum</h2>
      <a href="#">Preberi več</a>
    </div>

    <div class="box_b b5">
      <a href="#">Povezava nekam</a>
      <h2>Nek srednje dolg naslov</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
    </div>
  </div>
</section>