Advanced CSS Grid: Subgrid, Masonry, and Impossible Layouts

Subgrid: Perfect Card Alignment

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.product-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid; /* Use parent row tracks */
}

.product-card__image  { grid-row: 1; }
.product-card__title  { grid-row: 2; }
.product-card__price  { grid-row: 3; }
.product-card__button { grid-row: 4; align-self: end; }

Holy Grail Layout

.app {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 250px;
  min-height: 100vh;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Dense Auto-Placement

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; /* Fills gaps */
}
.featured { grid-column: span 2; grid-row: span 2; }

RAM: Responsive Without Breakpoints

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
}

-> Check grid colors with the Color Converter.