Unlock the Power of CSS Subgrid

A New Era of Grid Alignment

With the latest release of Firefox 71, web developers can now take advantage of CSS subgrid, a game-changing feature that revolutionizes the way we work with web layouts. Subgrid allows us to easily align items to their parent’s grid container, eliminating the need for rough layouts and badly shaped HTML and CSS hacks.

Aligning Rows: A Real-World Example

Let’s take a typical grid of cards, where we want to ensure that each card’s elements align perfectly, regardless of text length. By defining the rows in the container and instructing the card to span all rows, we can achieve a seamless layout.

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.card {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

Check out this live demo on CodePen to see it in action!

Columns: The Next Level

The same concept applies to columns. Imagine a simple form UI where we need to align labels and inputs dynamically. Subgrid provides a better solution by using the form’s grid to align the labels’ children, ensuring that the spacing for the labels corresponds to the longest one, and the inputs align automatically.

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.label {
  grid-column: 1 / 2;
}

.input {
  grid-column: 2 / -1;
}

Progressive Enhancement: The Way Forward

As we explore the possibilities of subgrid, it’s essential to consider fallback options for browsers that don’t support it yet. By using @supports queries, we can ensure a sensible fallback that gets progressively enhanced to the subgrid version.

@supports (grid-template-rows: subgrid) {
  /* subgrid styles here */
} else {
  /* fallback styles here */
}

More Than Just Subgrid: Firefox 71’s Hidden Gems

While subgrid is a significant addition to our CSS toolbox, Firefox 71 brings many more improvements for users and developers alike. Some of the notable features include:

• The implementation of the column-span property
• Aspect ratio mapping
• Support for the path value

JavaScript Updates: Promise.allSettled() and More

On the JavaScript side, the Promise.allSettled() method is now supported, providing an array with the outcome of each promise, whether fulfilled or rejected.

Promise.allSettled([
  Promise.resolve('Resolved'),
  Promise.reject('Rejected'),
]).then((results) => {
  console.log(results);
});