Views Responsive Grid added to Drupal 10 core!

Earlier today a new killer feature was committed to Drupal 10 core: Views Responsive Grids. But, it’s more than that.

The styles make use of new modern CSS that enable super cool features. If you’re interested in the details in the CSS, I wrote an article on CSS Tricks, and you can check out the CodePen here.

The fancy CSS enables some nifty features that will be passed down from the Views UI.

Image

Instead of specifying the number of columns, and screen widths, we specify

1. the maximum number of columns, and 
2. the minimum grid cell width.
3. the gutter spacing 

This is way more flexible than the former method!

The CSS works in such a way that when the grid cells resize to a point where they’re below the minimum width, the grid will reflow to have less columns. Alternatively, the grid will expand to fit in as many columns as permitted, while keeping the grid width above the minimum value!

Also, because the CSS is not reliant on the viewport width, the same grid view display is able to be used in a large region (and show more columns) and a narrow region (which would show less columns)! It will adjust automagically!

The vertical alignment mode of the new responsive grid works just as well! Instead of using CSS Grid, we make use of CSS columns, which is an under-used feature IMHO.

Although the CSS is fairly modern, there's not a lot too it!

  
/**
 * CSS for Views responsive grid style.
 */

.views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 10px; /* Will be overridden by an inline style. */
  --views-responsive-grid--column-count: 4; /* Will be overridden by an inline style. */
  --views-responsive-grid--cell-min-width: 100px; /* Will be overridden by an inline style. */
}

.views-view-responsive-grid--horizontal {
  /**
   * Calculated values.
   */
  --views-responsive-grid--gap-count: calc(var(--views-responsive-grid--column-count) - 1);
  --views-responsive-grid--total-gap-width: calc(var(--views-responsive-grid--gap-count) * var(--views-responsive-grid--layout-gap));
  --views-responsive-grid-item--max-width: calc((100% - var(--views-responsive-grid--total-gap-width)) / var(--views-responsive-grid--column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--views-responsive-grid--cell-min-width), var(--views-responsive-grid-item--max-width)), 1fr));
  gap: var(--views-responsive-grid--layout-gap);
}

.views-view-responsive-grid--vertical {
  margin-bottom: calc(var(--views-responsive-grid--layout-gap) * -1); /* Offset the bottom row's padding. */
  column-width: var(--views-responsive-grid--cell-min-width);
  column-count: var(--views-responsive-grid--column-count);
  column-gap: var(--views-responsive-grid--layout-gap);
}

.views-view-responsive-grid--vertical .views-view-responsive-grid__item > * {
  padding-bottom: var(--views-responsive-grid--layout-gap);
  page-break-inside: avoid;
  break-inside: avoid;
}


  

Understanding Drupal’s old Views Grid style

Drupal core’s original “Grid” format was written prior to responsive web design being a thing. It wrapped each row (or column) with a <div> element, to which you could add CSS classes to. This wrapping element prevented core developers from refactoring the CSS to make it responsive. We couldn’t just throw away user inputted values.

A brand new Views format was sorely needed.

During Olivero’s (Drupal’s new default front-end theme) development, I was able to refactor the old Grid format to remove the row/column wrapping <div>'s. This was possible because Olivero is for new sites, and people won’t be upgrading to it. Even within Olivero, we couldn’t make use of CSS custom properties or CSS Grid because of Drupal core’s commitment to support IE11.

About 2 years ago, I created an issue to make the Views Grid style responsive. Besides some words of encouragement, little happened.

The death of Internet Explorer gives life to Drupal’s front-end

With Internet Explorer usage steadily dropping, Drupal core decided that we were not going to support it in the upcoming Drupal 10 release. This opened up so many possibilities!

I got excited and refactored Olivero’s Grid implementation to switch from Flexbox to Grid. While doing so, I spent a lot of time exploring the capabilities of CSS Grid, and stumbled upon the technique mentioned above. I vetted this with Lauri Eskola and Andy Blum, and they both agreed that it was seriously kick-ass.

I then decided to write the afore-mentioned CSS Tricks article, and also received lots of positive feedback.

Image

I revisited my year-and-a-half old issue and updated the issue summary. I know I had the chops to do the front-end, but I needed a backend dev to do the Views Style implementation. I then saw my friend Martin Anderson-Clutz’s comment. 

Image

I pinged him on Slack, and set up a call. We were both excited, and Martin even worked through Christmas to get the tests passing! 🎅

From that point on, it was standard “hurry up and wait” Drupal core development. We got a flurry of initial reviews, and then occasional reviews afterwards. Dan Flanagan eventually jumped in to resolve his own critiques of the tests, and then we had some reviews and RTBC by Views maintainer Len Swaneveld.

At that point, core committer Lauri Eskoka (who had encouraged us throughout the process) committed it at 2:21pm ET today!

Killer feature

I know this is a killer feature, because I have to write custom responsive CSS grids on every single client project. Ever. This is going to allow people to rip out lots of code (and associated technical debt)!

You can see this in action on a live Tugboat preview at https://tugboat10-nzrx0of2glyelc4psykndmltoyzwrvtc.tugboatqa.com/grid-view

More to come in Prague!

Drupal’s theming system hasn’t been touched much since it was added (back in 2013). This is changing, with features such as this, new Twig filters, new CSS techniques etc.

Andy Blum and I are presenting a session on All the cool things you can do when you don’t support IE11 (and how we can use these in Drupal core), and immediately following, Lauri and I are presenting on How Drupal 10 will make you fall in love with Drupal theming.

Both sessions are on Wednesday, September 21st, and there’ll be more to share and discuss!

Thank you’s

Thank you to everyone who helped make this possible. It’s definitely a team effort. Special thanks to to Martin, who did the majority of the backend implementation. Andy suggested the use of CSS auto-fill() over auto-fit(). Dan Flanagan jumped in to review and then improve the unit tests. Lauri, Lev, Catch, and more provided reviews!

Tada! 🎉