用网格显示内容

时间:2019-03-05 07:15:03

标签: html css css3 alignment css-grid

我是前端设计的新手,我希望有人能帮助我进行我无法弄清楚的网格设置。我想使用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>

2 个答案:

答案 0 :(得分: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 */
}

答案 1 :(得分: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*/
}