Poop Sheet

Grid

Box alignment in grid layout

Aligning items

align-items

This does vertical aligning. Used in the container to set all children.

Default is stretch.

align-self

Overides align-items for a given grid child.

  1. [start] ie top
  2. [end] ie bottom
  3. [center]
  4. [stretch] default

align-content

justify-items

Default is stretch.

justify-self

justify-content

place-items

Shorthand for align-items and justify-items combined.

place-self

place-content

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.

What’s the difference between display: grid and display: inline-grid?

<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

Equally sized columns

repeat

Sized by content

fit-content

Positioning items against lines

Line-positioning shorthands

Gutters