CSS Grid Demo

by Caitlin Allie

HTML

<h1>Example 1:</h1>
<ul class="one">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

<hr/>

<h1>Example 2:</h1>
<ul class="two">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

<hr/>

<h1>Example 3:</h1>
<ul class="three">
  <li class="item-a">A</li>
  <li class="item-b">B</li>
  <li class="item-c">C</li>
  <li class="item-d">D</li>
</ul>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

h1 {
  margin: 10px 0;
  font-weight: 600;
}

hr {
  margin: 20px 0;
}

ul {
  display: grid;  /* declares a grid container */
  grid-gap: 10px;  /* defines spacing between grid items */
}

li {
  background-color: lightgrey;
  border-radius: 3px;
  padding: 20px;
}

ul.one {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* pattern for grid items */
}

ul.two {
  grid-template-columns: repeat(2, 50px 2fr);  /* try toggling repeat count and pattern */
  grid-template-rows: repeat(1, 100px 200px);
}

ul.three {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
}

.item-a {
  grid-column: 1/2;
  grid-row: 1/4;
}

.item-b {
  grid-column: 2/4;
}

.item-c {
  grid-row: 2/4;
}

.item-d {
  
}