<div class="wrapper">
        <article class="flow">
          <h1>A simple grid</h1>
          <figure class="callout">
              In this example the grid container creates a grid with three column tracks
              and two row tracks.
          <div class="container" id="container">
            <div class="box">Item one</div>
            <div class="box">Item two</div>
            <div class="box">Item three</div>
            <div class="box">Item four</div>
            <div class="box">Item five</div>
.container {
  display: grid;
  grid-template-columns: 5em 100px 30%;
  grid-template-rows: 200px auto;
  gap: 10px;
  background-color: var(--color-stroke);
  padding: 1em;
  max-width: 30rem;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.