Programming Tutorials

  The "ragged footer" is one of the most persistent visual bugs in component-based web design. You have a row of pricing cards or feature teasers. The design mockup shows perfectly aligned titles, descriptions, and "Buy Now" buttons. In implementation, reality hits. One title wraps to two lines. One description is slightly longer. Suddenly, your "Buy Now" buttons are scattered at different vertical positions, destroying the visual rhythm of the row. For years, we hacked this. We used JavaScript to equalize heights ( matchHeight.js ). We used  min-height  with magic numbers. We used Flexbox with  margin-top: auto  on the footer to force it to the bottom of the card. While  margin-top: auto  aligns the  bottom  of the footers, it does not align the  start  of the footers if the footers themselves vary in height, nor does it align the internal sections (like headers) across the row. With CSS Grid Level 2 (Subgrid), we can solve this la...

  The promise of CSS Grid Level 2 (Subgrid) is tantalizing for design systems: the ability to align nested components (like card headers, bodies, and footers) across sibling elements without hardcoding heights. However, a specific implementation failure is pervasive. You apply  grid-template-rows: subgrid  to a child element, expecting its internals to snap perfectly to the parent's rhythm. Instead, the layout collapses. Content overlaps, or the child items shove themselves into a single track, completely ignoring the internal spacing you intended. This collapse happens because  subgrid  does not create tracks; it exposes existing ones. If the parent item does not span enough tracks to accommodate its own children, the layout logic fails. The Root Cause: The Span Dependency In standard CSS Grid, a nested grid creates a new Independent Formatting Context. It calculates its own track sizes based on its own content. When you declare  grid-template-rows: subgri...