CSS Сетка: заставляет второй div появляться слева и первый div справа, когда два столбца - PullRequest
Новая
       44

CSS Сетка: заставляет второй div появляться слева и первый div справа, когда два столбца

0 голосов
/ 01 мая 2020

У меня есть CSS Сетка, установленная для разбиения на два столбца, когда она 600px или шире. Я хочу настроить его так, чтобы первый div формировал правый столбец вместо левого по умолчанию, а второй div - левый столбец вместо правого столбца по умолчанию. Есть ли простой способ сделать это с сеткой CSS?

HTML

<div class = "section-3">
    <div class ="grafica">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    </div>
    <div class = "grafica">
        <img src="image here" />
    </div>
</div>

CSS

.section-3{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    text-align:center;
}

.grafica {
    padding: 1rem;
    width: 100% ; 
    margin: 0 auto;
}

.grafica img {
    max-width:100%;
    height:auto;
}

@media (min-width: 600px) {
  .section-3 { 
      grid-template-columns: repeat(2, 1fr); 
     }
}

Заранее спасибо за любые помощь, которую вы можете предложить!

1 Ответ

1 голос
/ 02 мая 2020

Вы можете просто использовать flexbox для этого.

сначала мы начинаем с flex-direction:column;, поэтому элементы стекаются, затем с размера экрана 600px и выше меняются до flex-direction:row-reverse, что приведет к размещению элементов подряд и в обратном порядке. 

.section-3 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  grid-gap: 2rem;
  text-align: center;
}

.grafica {
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
}

.grafica img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .section-3 {
    flex-direction: row-reverse;
  }
}
<div class="section-3">
  <div class="grafica">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>
  <div class="grafica">
    <img src="https://picsum.photos/300" />
  </div>
</div>

Если вы должны использовать CSS Grid, тогда вы можете просто указать каждый столбец элементов индивидуально. 

.section-3 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2rem;
  text-align: center;
}

.grafica {
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
}

.grafica img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .section-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-3> .grafica:nth-child(1){
    grid-column:2;
  }
  .section-3>.grafica:nth-child(2){
    grid-column:1;
  }
}
<div class="section-3">
  <div class="grafica">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>
  <div class="grafica">
    <img src="https://picsum.photos/300" />
  </div>
</div>
...