我的网格将不会使用css移至下一行

Question

 .grid-container {
    grid-template-columns: repeat(12,auto);
    display: grid;
    width: 80%;}

.intro{
    padding: 2em;
    text-align: center;
    grid-column: 1/13;}

.content1 {grid-column: 1/4;}
.content2 {grid-column: 4/7;}
.content3 {grid-column: 7/10;}
.content4 {grid-column: 10/13;}

.content5 {grid-column: 1/5;}
.content6 {grid-column: 5/9;}
.content7 {grid-column: 9/13;}

<div class="grid-container">
        <div class="intro">
            <h1>An introduction</h1>
            <p>dummy text
            </p>
        </div>
        <div class="content">
            <article class="content1"><img src="images/IMG_6109.jpg"></article>
        </div>
        <div class="content">
            <article class="content2"><img src="images/IMG_3911-2.jpg"></article>
        </div>
        <div class="content">
            <article class="content3"><img src="images/IMG_6288.jpg"></article>
        </div>
        <div class="content">
            <article class="content4"><img src="images/IMG_6126-4.jpg"></article>
        </div>
        <div class="content">
            <article class="content5"><img src="images/IMG_3459.jpg"></article>
        </div>
        <div class="content">
            <article class="content6"><img src="images/IMG_2715.jpg"></article>
        </div>
        <div class="content">
            <article class="content7"><img src="images/IMG_5418.jpg"></article>
        </div>
    </div>

我的网格无效，并且将所有内容保持在同一行。我正在尝试将前四个图像放在一行上，然后将下三个图像放在下一行。有人可以解释我在做什么错吗？

Answer 1

这些类放错了位置，您需要从每个div中的content(n)元素中删除article类，并用其对应的content替换每个div中的content(n)类，如下所示

 .grid-container {
    grid-template-columns: repeat(12,auto);
    display: grid;
    width: 80%;}

.intro{
    padding: 2em;
    text-align: center;
    grid-column: 1/13;}

.content1 {grid-column: 1/4;}
.content2 {grid-column: 4/7;}
.content3 {grid-column: 7/10;}
.content4 {grid-column: 10/13;}

.content5 {grid-column: 1/5;}
.content6 {grid-column: 5/9;}
.content7 {grid-column: 9/13;}

<div class="grid-container">
        <div class="intro">
            <h1>An introduction</h1>
            <p>dummy text
            </p>
        </div>
        <div class="content1">
            <article><img src="images/IMG_6109.jpg"></article>
        </div>
        <div class="content2">
            <article><img src="images/IMG_3911-2.jpg"></article>
        </div>
        <div class="content3">
            <article><img src="images/IMG_6288.jpg"></article>
        </div>
        <div class="content4">
            <article><img src="images/IMG_6126-4.jpg"></article>
        </div>
        <div class="content5">
            <article><img src="images/IMG_3459.jpg"></article>
        </div>
        <div class="content6">
            <article><img src="images/IMG_2715.jpg"></article>
        </div>
        <div class="content7">
            <article><img src="images/IMG_5418.jpg"></article>
        </div>
    </div>