Poop Sheet

Layout

Alignment

As far as I undertand it, flex and grid are bandaids for these not being implemented in the default display: block yet. These are very confusing because the work differently not only in different display settings, but also if flex is set to row or column.

Flex

Grid

padding vs margin

https://www.youtube.com/watch?v=EhbZGV2dqZ4

margin

https://www.youtube.com/watch?v=Azfj1efPAH0

Centering

horizontally, justify-*

justify-items

justify-content

justify-self

vertically, align-*

align-* works differently in flex and grid

align-items

align-content

align-self

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.

flex

Flex

Froggy

Flex is a newish option for the CSS display property, and simplifies responsive design by replacing lots of historical cruft.

Something that led me down a blind ally was to mix flex with grid by splitting CSS stylesheets into breakpoints, but simply focusing on flex and treating all the legacy CSS stuff as deprecated made responsive design much easier.

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. — Specification