CSS Grid Layout and nth-child

Question

I'm going to create a layout with dynamic number of images, all through css-grid, but I have a problem, I would like the first 10 images to be creatively designed while the later ones I'd like to have them ordered in grid.

Instead from 11 onwards they go to insert where they find space in the grid. I attach a reference image and a this jsfiddle link with an example of my code.

Please help me, thank in advance

Probably the error is here

#container .mix:nth-child(n+11){
 grid-column-start: 1;
 grid-row-start: 43;
 grid-column: span 4;
 grid-row: span 2;
}

reference image

#container {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }

  #container .mix:nth-child(1){
    grid-column: 7 / span 9;
    grid-row: 1 / span 8;
  }

  #container .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  #container .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  #container .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  #container .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  #container .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  #container .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  #container .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  #container .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }

  #container .mix:nth-child(n+11){
    grid-column-start: 1;
    grid-row-start: 43;
    grid-column: span 4;
    grid-row: span 2;
  }

user_7041074 · Answer

The problem is that the gaps between the first 10 children is big enough for the later children to fill them. So as long as you want to keep this much space, you'll not be able to achieve what you want with a single container (as long as the number of image is dynamic.

Since the first part has a static amount of children. It would be best to split this in 2 containers: one for the first the images and one for the rest. Check the code below. Although you width above was pretty much dynamic while the images have static sizes. So unless you make either the image size dynamic or the container width static. You're no gonna get the 3 items per row in the second container

.creative {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }
 
 .ordered {
  display: flex;
 flex-wrap: wrap;
  }

  .creative .mix:nth-child(1){
    grid-column: 1 / span 9;
    grid-row: 1 / span 8;
  }

  .creative .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  .creative .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  .creative .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  .creative .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  .creative .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  .creative .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  .creative .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  .creative .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }

user_7258885 · Answer

I agree with Michaël Vanderheyden I was doing several tests of the grid, and I think in the same way that dividing into a new grid where you place the new elements in an orderly manner as you put it in the image is more feasible, as a recommendation I know that the objective is to use display: grid, but you can use new possibilities and greater facilities if you use a CSS framework, I know someone had already suggested it, but you could standardize the behavior of your grid and even access more behavioral options of the internal elements, with the use of framworks (HTML-css-JS), I do not know the circumstances of the requirement but I think the recommendation is valid, good luck

CSS Grid Layout and nth-child

2 Answers