<h1>Contents:</h1>
<ul>
  <li>2 Colum grid</li>
  <li>2 Colum grid (label/content)</li>
  <li>4 Colum grid (label/content | label/content)
    <br><i>2 cols in mobile</i>
</li>
  <li>3 Colum grid</li>
</ul>
<h2>2 Column Grid (standard 50% widths by default)</h2>
<div class="grid grid-cols-2">
  <p>This is column 1/2</p>
  <p>This is column 2/2</p>
  <p>This is column 1/2</p>
  <p>This is column 2/2</p>
</div>

<h2>2 Column Grid (with small labels column)</h2>
<p>
  This one has a set of labels on the left and the main content on the right.
</p>
<div class="grid grid-cols-2-max-1fr">
  <p>#1 Label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
  <p>#2 label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
</div>

<h2>4 Column Grid (2 columns with labels - breaks down to 2 columns in mobile)</h2>
<p>
  Similar to the previous, only setup for 2 pairs of label/content columns.
</p>
<div class="grid grid-cols-4-max-1fr">
  <p>#1 Label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
  <p>#2 label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
  <p>#1 Label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
  <p>#2 label</p>
  <p>Nobis eius nostrum asperiores enim placeat ipsum. Voluptatem modi qui quia saepe ea eum qui dolores. Fuga accusantium rerum iure consequuntur quo repudiandae blanditiis eos.</p>
</div>


<h2>3 Column Grid</h2>
<p>
  Just because....
</p>
<div class="grid grid-cols-3">
  <p>This is column 1/3</p>
  <p>This is column 2/3</p>
  <p>This is column 3/3</p>
  <p>This is column 1/3</p>
  <p>This is column 2/3</p>
  <p>This is column 3/3</p>
</div>

.grid p {
  background: #bfbfbf;
  padding: 10px;
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 20px;
}

.grid-cols-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-cols-2-max-1fr {
  grid-template-columns: max-content 1fr;
}

.grid-cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-cols-4-max-1fr {
  grid-template-columns: max-content 1fr max-content 1fr;
}

@media (max-width: 800px), (max-device-width: 800px) {
  .grid-cols-4-max-1fr {
    grid-template-columns: max-content 1fr;
  }
}