1. Switch the Grid Flow Axis : grid-auto-flow: column;
2. XY Center Anything : place-content: center; (on any child)
3. Intrinsically Responsive Grid Columns

:root {
  --grid-col-breakpoint: 15rem;
}

.grid-columns {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-breakpoint), 1fr));
}

box-shadow with inset 😍

minmax(0, 1fr)

because by default the min size is auto which leads to be the size of the element

Less than 10kb gziped and do the job

WOW this use of attr() function in CSS ♥

$gridGap: 2rem;
$minColWidth: 15rem;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}

• Icon + Text Button
• Icon Styling for Icon + Text
• Icon-Only Buttons

Can be useful at any time !

Flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

Grid

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

Reusable svg shapes