CSS网格-模板使用4个图像围绕部分，p标记位于中心

Question

我想创建的布局我想创建一个4个图像和一个段落的网格模板。我想让他们像。“img_1 img_2 img_2”“img_1 p-标签img_4”“img_3 img_3 img_4”。我像那样编码，但它不起作用，我也尝试了这个。

下面的html代码

  <section class="images">
    <div id="img-div" class="img-1">
      <img src="https://media.gettyimages.com/photos/tschechow-anton-2901186015071904-schriftsteller-russland-halbportrait-picture-id541789205?s=2048x2048"/>
    </div>
    <div id="img-div" class="img-2">
      <img src=" https://media.gettyimages.com/photos/anton-chekhov-in-his-study-in-yalta-18951900-found-in-the-collection-picture-id600058295?s=2048x2048">
    </div>
    <div id="img-div" class="img-3">
      <img src="https://media.gettyimages.com/photos/anton-chekhov-studying-book-with-actors-of-the-moscow-state-art-in-picture-id171086002?s=2048x2048"/>
    </div>
    <div id="img-div" class="img-4">
      <img src="https://media.gettyimages.com/photos/anton-pavlovich-chekhov-2901186015071904-writer-dramatist-russia-picture-id541537841?s=2048x2048"/>
    </div>
   <div class="quote">
    <q>Knowledge is of no value unless you put it into practice.</q>
  </div>
  </section> 

css代码

main {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
section {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
}
#img-div {
  width: auto;
  height: auto;
} 
.images:nth-child(1){
  grid-area: 1/1/3/2;
}
.images:nth-child(2){
  grid-area: 1/2/2/4;
}
.images:nth-child(3){
  grid-column: 3/1/4/3;
}
.images:nth-child(4){
  grid-column: 2/3/4/4;
}
.quote {
  grid-area: 2/2/3/3;
}

Answer 1

您的选择器不起作用，并且您为图像3和4编写了网格列而不是网格区域。

null

main {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

section {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

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

.img-2 {
  grid-area: 1/2/2/4;
}

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

.img-4 {
  grid-area: 2/3/4/4;
}

.quote {
  grid-area: 2/2/3/3;
}

<section class="images">
  <div id="img-div" class="img-1">
    <img src="https://media.gettyimages.com/photos/tschechow-anton-2901186015071904-schriftsteller-russland-halbportrait-picture-id541789205?s=2048x2048" />
  </div>
  <div id="img-div" class="img-2">
    <img src=" https://media.gettyimages.com/photos/anton-chekhov-in-his-study-in-yalta-18951900-found-in-the-collection-picture-id600058295?s=2048x2048" />
  </div>
  <div id="img-div" class="img-3">
    <img src="https://media.gettyimages.com/photos/anton-chekhov-studying-book-with-actors-of-the-moscow-state-art-in-picture-id171086002?s=2048x2048" />
  </div>
  <div id="img-div" class="img-4">
    <img src="https://media.gettyimages.com/photos/anton-pavlovich-chekhov-2901186015071904-writer-dramatist-russia-picture-id541537841?s=2048x2048" />
  </div>
  <div class="quote">
    <q>Knowledge is of no value unless you put it into practice.</q>
  </div>
</section>