CSS网格中列的反向顺序

时间：2019-07-18 03:23:12

标签： html css

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

我想要实现的目标：

expected

我现在有这个。

my website 

.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>

3 个答案:

答案 0 :(得分：1)

.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;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

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

@media screen and (max-width:768px){

  .order-1 {
    order: 2 !important;
  }

  .order-2 {
    order: 1 !important;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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 order-2">
        <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 order-1">
          <img src="img/cheesedish.jpg" class="about__img about_img-flip" alt="about-img">
      </div>
</article>
</div><!--grid container-->
</section>
</body>
</html>

在两列上都更改order。我保持与小型设备上相同的顺序。希望对您有帮助

答案 1 :(得分：0)

这可以通过将另一个类reverse添加到第二个about-container元素来轻松实现。添加的CSS如下：

.about-container.reverse .title {
  grid-row: 2;
}

.about-container.reverse .about_img {
  grid-row: 1;
}

整个代码段：

.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-container.reverse .title {
  grid-row: 2;
}

.about-container.reverse .about_img {
  grid-row: 1;
}

.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 reverse">
      <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>

答案 2 :(得分：0)

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

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

因此，现在我们必须在示例中首先设置要显示大小写的元素，借助title属性将grid-row的顺序更改为第二个。

检查输出中的代码段。

.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>

相关问题
最新问题