Question 249448 in Html Question posted in
Some basic documentation can be found here.

Html – Grid reordering items on mobile devices

I have a basic grid layout:

.container{
   display:grid;
   gap:20px;
   grid-template-columns: repeat (12, 1fr)
}
.container >*{
   grid-column-start: span 12
}
@media(min-width:768px){
   .item{
      grid-column-start:span 6
   }  
}
<div class="container">
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
    <div class="item"><img src="..."></div>
    <div class="item"><p>Text</p></div>
</div>

How can I have the image in the second row on the right on screen sizes above 768px, and the text on the left?

Tags:

2

Answers


  1. 0

    To have the image in the second row on the right on screen sizes above 768px and the text on the left, you can update your code.

    .container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, 1fr);
}

.container > * {
  grid-column-start: span 12;
}

@media (min-width: 768px) {
  .item:nth-child(even) {
    grid-column-start: span 6;
    grid-row-start: 1;
  }

  .item:nth-child(odd) {
    grid-column-start: span 6;
    grid-row-start: 2;
  }
}

<div class="container">
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
</div>
    Login or Signup to reply.
  2. 0

    Here’s one way you could do it.

    .container{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, 1fr)
}
.container >*{
  grid-column-start: span 12
}
@media(min-width:768px) {
  .item:nth-child(odd) {grid-column: 7 / span 6;}
  .item:nth-child(even) {grid-column: 1 / span 6;}
  .container {grid-auto-flow: dense;}
}
    <div class="container">
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
  <div class="item"><img src="..."></div>
  <div class="item"><p>Text</p></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search