用网格显示内容

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 设置为 第一个值，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>