css principles

🚀 master the principles, create better UIs

tags & categories

3posts

summary
- Lines are numbered from 1
  - The grid-area format is RCRC (row-col-row-col, start-start-end-end).
- Gaps add space evenly to both sides of a line (but not to lines at the edges).
- fr causes tracks to take all the remaining space, shared between fr units.
- minmax has 4 steps: mins, static maxs, fr balancing, fr balanced.
- Auto tracks are only added for either rows or cols, never both.
- justify-content and align-content manage the extra white space inside the grid container and distribute it around the tracks.
- repeat:
  - auto-fill creates as many tracks as possible, ignores items.
  - auto-fit same as fill, but removes tracks with no items.
read post 003 »
summary
- "Collapsing" means only allowing the largest margin to take vertical space and ignoring the "collapsed" ones.
- It is activated when two top or bottom element boundaries touch and they share a common ancestor in the DOM.
- Only applies to vertical/y-axis top-bottom margins.
- To avoid it:
  - A. Prevent the element boundaries from touching with padding/border/text elements.
  - B. Parent set to flex or grid.
read post 002 »
summary
- Floated elements wrap text around its sides (including inline and inline-block sibling elements).
- The parent of the float element does not contain it by default (the float overflows at the bottom of the parent).
  - Apply clear:both to a sibling element that follows the floated element.
  - Or overflow:auto on the parent.
- Floated elements take the same x-axis as the text line where they appear, or the one after if there is not enough space.
read post 001 »