Responsive grid with CSS Grids

Responsive grid with CSS Grids

by Blomat

HTML

<div id="container">
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    
    <!-- end top 10 images -->
    
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    
    
</div><!-- end container -->

CSS

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