A nice code snippet here :

.checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";

  > * {
    grid-area: checkbox;
  }
}

This will put all children in the same area; and will behave as a position: absolute, but with the power of Grid

A list of beautiful background gradient 🌈

Put all the items in the same cells

header {
  display: grid;
  grid-template-areas: "heros";

  > * {
    grid-area: hero;
  }
}

Hero 1 summary

object-fit used to control img size
align-items: center used to vertically align the grid children

Hero 2 summary

created a color screen over the img by defining background-color of the header with rgba and adding z-index: -1 to the img to slide it behind the header
used pseudo-elements for additional design flair, and positioned them separately from the parent grid definition with place-self

Hero 3 summary

use of a wrapper to provide a secondary grid layout for content versus header design elements
creation of auto-width columns with grid-template-columns
Leveraging vmin to minimize padding on smaller viewports and increase it for larger viewports

Nice picture 👍

A new up-to-date CSS Zen Garden

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 !