html - CSS网格中列的反向顺序

Question

我试图让网站的列在第二个网格中反转，以便图像和文本翻转并交换它们的位置。我希望元素改变它们的顺序。我基本上想要第一张图片中的布局，但没有更改任何设置。出于某种原因，即使我将边框半径添加到图像类中，它也无法正常工作。

我要实现的目标:

我目前拥有的是这个。

.about_img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.grid-container {
  max-width: 90vw;
  margin: 2rem auto;
  display: grid;
  grid-row-gap: 2rem;
}

@media screen and (min-width:768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 4rem;
  }
}

.grid-container {
  max-width: 75vw;
}

.section-title {
  padding: 1rem 0.5rem;
}

.title_name {
  font-size: 3rem;
  text-transform: capitalize;
}

.title_underline {
  text-align: left;
  background: #F4D06F;
  width: 5rem;
  height: 0.25rem;
}

.title_text {
  letter-spacing: .1rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: grey;
}

.about-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  grid-gap: 2rem;
}

.about_img {
  border-radius: 0.25rem;
}

@media screen and (min-width:768px) {
  .about_img-flip {
    order: -1;
  }
}

<section class="about">
  <div class="grid-container">
    <article class="about-container">
      <div class="title">
        <h1 class="title_name">our story</h1>
        <div class="title_underline"></div>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem
          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>
      </div>
      <div class="about_image">
        <img src="img/cheeseclose.jpg" class="about__img" alt="about-img">
      </div>
    </article>
    <!--about column 1-->

    <article class="about-container">
      <div class="title">
        <h1 class="title_name">our story</h1>
        <div class="title_underline"></div>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem
          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>
      </div>
      <div class="about_image">
        <img src="img/cheesedish.jpg" class="about__img about_img-flip" alt="about-img">
      </div>
    </article>
  </div>
  <!--grid container-->
</section>

Answer 1

要实现这一点，您必须向您的部分添加一个父类，就像我在示例中采用的 grid-row 一样。

现在，当您想要更改网格元素的顺序时，您必须需要 display: grid;，您已经在 .grid-container 类中拥有它。

所以现在我们必须在我的示例中设置要先显示哪个元素 我已经在 grid-row 属性的帮助下将 title 的顺序更改为第二.

检查输出中的片段。

.about_img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.grid-container {
  max-width: 90vw;
  margin: 2rem auto;
  display: grid;
  grid-row-gap: 2rem;
}
.about-container.grid-row .title {
  grid-row: 2;
}

@media screen and (min-width:768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 4rem;
  }
}

.grid-container {
  max-width: 75vw;
}

.section-title {
  padding: 1rem 0.5rem;
}

.title_name {
  font-size: 3rem;
  text-transform: capitalize;
}

.title_underline {
  text-align: left;
  background: #F4D06F;
  width: 5rem;
  height: 0.25rem;
}

.title_text {
  letter-spacing: .1rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: grey;
}

.about-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  grid-gap: 2rem;
}

.about_img {
  border-radius: 0.25rem;
}

<section class="about">
  <div class="grid-container">
    <article class="about-container">
      <div class="title">
        <h1 class="title_name">our story</h1>
        <div class="title_underline"></div>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem
          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>
      </div>
      <div class="about_image">
        <img src="https://dummyimage.com/600x400/000/fff" class="about__img" alt="about-img">
      </div>
    </article>
    <!--about column 1-->

    <article class="about-container grid-row">
      <div class="title">
        <h1 class="title_name">our story</h1>
        <div class="title_underline"></div>
        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem
          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>
      </div>
      <div class="about_image">
        <img src="https://dummyimage.com/600x400/000/fff" class="about__img about_img-flip" alt="about-img">
      </div>
    </article>
  </div>
  <!--grid container-->
</section>