Poop Sheet

Grid

Grid

For games this is probably the right choice to fix things in rows and columns.

Grid

CSS-Tricks Guide

Grid Container

The element on which display: grid is applied.

<div class="table">
  <div class="dungeon">Dungeon</div>
  <div class="card1">Card 1</div>
  <div class="card2">Card 2</div>
  <div class="card3">Card 3</div>
  <div class="card4">Card 4</div>
  <div class="discard">Discard</div>
  <div class="health">Health</div>
  <div class="weapon">Weapon</div>
  <div class="slain">Slain</div>
</div>

.table {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  background-color: green;
  font-family: system-ui;
}

Grid Item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t. ie “card1” is a grid item, but the text in the span and the img element aren’t.

  <div class="card1">
    <span class="cell-text">Card 1</span>
    <img id="r1" class="card" draggable="true" />
  </div>

Grid Lines

.card1 { grid-column: 2; grid-row: 1; }

Grid Tracks

Positioning items against lines

Line-positioning shorthands

Gutters