CSS 6-Column Grid

by the_voder

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/release/featherlight.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>6-Column Grid</title>
  </head>

  <body id="page1">
    <div id="wrapper">
      <main id="grid1">
        <header></header>
        <article id="article1"></article>
        <article id="article2"></article>
        <article id="article3"></article>
        <footer></footer>
      </main>
    </div>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}


/* GRID 1 (MOBILE FIRST) */

#grid1 {
  display: grid;
  height: 100vh;
  padding: 10px;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 10px;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 0.25fr;
  grid-row-gap: 10px;
}

header {
  background-color: red;
  grid-column: 1 / 7;
  grid-row: 1 / 2;
}

article {
  background-color: #ddd;
  background-size: cover;
  background-position: center top;
}

#article1 {
  grid-column: 1 / 7;
  grid-row: 2 / 3;
  /* REPLACE with own images */
  background-image: url("https://i.picsum.photos/id/1015/500/500.jpg");
}

#article2 {
  grid-column: 1 / 7;
  grid-row: 3 / 4;
  background-image: url("https://loremflickr.com/500/500/cat");
}

#article3 {
  grid-column: 1 / 7;
  grid-row: 4 / 5;
  background-image: url("https://loremflickr.com/500/500/pig");
}

footer {
  background-color: red;
  grid-column: 1 / 7;
  grid-row: 5 / 6;
}

/* MEDIA QUERY FOR SCREEN MORE THAN 640px */

@media only screen and (min-width: 640px) {

  #grid1 {
    grid-template-rows: 0.5fr 1fr 1fr 0.25fr;
  }

  #article1 {
    grid-column: 1 / 5;
    grid-row: 2 / 4;
  }

  #article2 {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
  }

  #article3 {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
  }

  footer {
    grid-column: 1 / 7;
    grid-row: 4 / 5;
  }

}