Question

我是前端设计的新手，我希望有人能帮助我进行我无法弄清楚的网格设置。我想使用display: grid功能设置框，如示例图像所示。这些框稍后将包含内容。有人可以帮我，因为我想不通。

Example here

* {
    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

您的grid-areas有点混乱-将grid-area的{{1}}定义更改为b4，将grid-area: 3 / 1 / 4 / 2的定义更改为b5。

使用网格线时，请注意grid-area: 3 / 2 / 4/ 5的用法：

如果指定了四个值，则将grid-row-start设置为   第一个值grid-column-start设置为第二个值，   将grid-row-end设置为第三个值，并将grid-column-end设置为   第四个值。

MDN

请参见下面的更正演示

grid-area

* {
  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 */
}

Answer 2

您可以像下面那样简化网格，而无需网格区域：

* {
  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>

用网格显示内容

2 个答案: