" Holy Grail " of Modernity

The best way to build layouts today is combining power of CSS Grid and Container Queries.

Strategy:

1. Grid creates global page " grid-skeleton " .
2. Container Queries control internal look of each block.

/* Global grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Component-container */
.widget {
  container-type: inline-size;
}

/* Component itself decides how to look inside grid */
@container (width > 500px) {
  .widget-content { display: flex; gap: 2rem; }
}