Before Grid, complex layouts required hacks. Negative margins. Absolute positioning. Floats with clearfix. JavaScript calculating heights. We built entire frameworks to solve problems the CSS specification should have handled natively. Grid arrived in 2017 and changed everything. It is not an improvement on Flexbox. It is a different universe.
Flexbox is for one-dimensional layout. Grid is for two-dimensional layout. Use the right tool.
The grid-template-areas property is the most underused feature in CSS. It lets you name regions of your layout and assign elements to them visually. The result reads like ASCII art. You see the layout in the CSS. No coordinates, no magic numbers, no mental mapping between class names and grid positions.
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        'header  header  header'
        'sidebar main    aside'
        'footer  footer  footer';
    gap: 1.5rem;
    min-height: 100vh;
}

.dashboard__header  { grid-area: header; }
.dashboard__sidebar { grid-area: sidebar; }
.dashboard__main    { grid-area: main; }
.dashboard__aside   { grid-area: aside; }
.dashboard__footer  { grid-area: footer; }

/* Responsive: just redefine the areas */
@media (max-width: 900px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            'header'
            'main'
            'aside'
            'sidebar'
            'footer';
    }
}
Subgrid is the feature that makes Grid truly powerful for component systems. Before subgrid, a card inside a grid cell could not align its internal rows with the parent grid. You had to guess heights or use JavaScript. With subgrid, the child inherits the parent's track definitions. Nested components align perfectly without any calculation.
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    gap: 1.5rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3; /* Card spans 3 parent rows */
    gap: 0; /* Use parent gap */
}

.card__image   { /* Aligns to row 1 of parent */ }
.card__title   { /* Aligns to row 2 of parent */ }
.card__content { /* Aligns to row 3 of parent */ }

/* All card titles align across the entire grid,
   even with varying content heights. */
The minmax() function with auto-fill creates responsive grids without media queries. The browser fills the row with as many columns as fit, each at least the minimum width. When the viewport shrinks, columns wrap automatically. This is the only responsive grid technique most layouts need.
/* No media queries needed */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* The browser handles everything:
   - Wide screen: 5 columns
   - Medium: 3 columns
   - Narrow: 2 columns
   - Mobile: 1 column */

/* For a masonry-like effect */
.gallery--masonry {
    grid-template-rows: masonry;
    align-tracks: start;
}
Grid is not a replacement for Flexbox. It is a complement. Flexbox handles alignment within a single row or column. Grid handles the overall structure. A dashboard uses Grid for the page layout and Flexbox for the header navigation. The two work together. The modern CSS layout stack is Grid plus Flexbox plus Container Queries. Master these three and you can build anything.