Question 125043 in CSS Question posted in
Some basic documentation can be found here.

CSS grid auto-flow reordering items

I’m trying to create an autoflow component to re-arrange content according to screen size. The content blocks always come in pairs: a text box and an image.

On a desktop device, I want the layout to be

| Text1 | Img1  |
| Img2  | Text2 |
| Text3 | Img3  |
| Img4  | Text4 |
... unlimited number of blocks

on the mobile I always want the text before the image

| Text1 |
| Img1  |
| Text2 |
| Img2  |
| Text3 |
| Img3  |
...

I have been using a grid container

    .lrcontainer {
        display: grid;
        width: 100%;
        align-self: start;
        grid-auto-flow: row;
        align-items: center;
        justify-items: center;
    }

and set the number of columns using media queries. I put the individual text and img blocks into the right order for the desktop view and tried to reorder them for mobile view by using css nth-child and the order property without any success.

I’m beginning to think, that this simply cannot be achieved, and that I need to put the text img pair inside an additional container. Am I right, or does anybody have a nifty trick to implement this type of layout?

Tags:

2

Answers


  1. 0

    Set grid-auto-flow: dense; on grid container, search cells with :nth-child and use on them grid-column:

    .grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  /* optional */
  width: fit-content;
}

@media (min-width: 480px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .cell:nth-child(4n-1) {
    grid-column: 2 / 3;
  }
  .cell:nth-child(4n-1) + .cell {
    grid-column: 1 / 2;
  }
}
    <div class="grid">
  <div class="cell">Text1</div>
  <div class="cell">Img1</div>
  <div class="cell">Text2</div>
  <div class="cell">Img2</div>
  <div class="cell">Text3</div>
  <div class="cell">Img3</div>
  <div class="cell">Text4</div>
  <div class="cell">Img4</div>
  <div class="cell">Text5</div>
  <div class="cell">Img5</div>
  <div class="cell">Text6</div>
  <div class="cell">Img6</div>
</div>
    Login or Signup to reply.
  2. 0

    A simplified version of @imhvost answer. I have a article where I detail such a technique: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/

    .grid {
  display: grid;
  grid-auto-columns: 1fr; /*or auto if you want to fit the content */
  grid-auto-flow: dense;
}

@media (min-width: 480px) {
  .cell:nth-child(4n) {
    grid-column: 1;
  }
  .cell:nth-child(4n + 3){
    grid-column: 2;
  }
}
    <div class="grid">
  <div class="cell">Text1</div>
  <div class="cell">Img1</div>
  <div class="cell">Text2</div>
  <div class="cell">Img2</div>
  <div class="cell">Text3</div>
  <div class="cell">Img3</div>
  <div class="cell">Text4</div>
  <div class="cell">Img4</div>
  <div class="cell">Text5</div>
  <div class="cell">Img5</div>
  <div class="cell">Text6</div>
  <div class="cell">Img6</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search