CSS Grid Learning

by ethanpil

HTML

<header class="box">HEADER</header>
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>  
</div>
<header class="box">FOOTER</header>

CSS

/* 
https://www.digitalocean.com/community/tutorials/css-css-grid-holy-grail-layout#bonus-making-it-responsive
https://www.joshwcomeau.com/css/interactive-guide-to-grid/
*/

body {
  background-color: #000;
  color: #fff;
}
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px , 1fr));
  gap: 8px;
}
.box {
  border: 1px solid white;
  text-align: center;
  font-size: 2em;
}