Query block: CSS Grid for Grid View option

[dashkevych]

I am wondering if there are any plans to use CSS Grid instead of Flexbox?

What problem does this address?

At the moment, the Query block uses flexbox for the query container when the Grid View option is selected. Below are the styles that the Query block currently uses (WP 5.8-alpha-51064).

Default styles:

.wp-block-query-loop.is-flex-container {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}

.wp-block-query-loop.is-flex-container li {
    margin: 0 0 1.25em 0;
    margin-right: 0px;
    width: 100%;
}

@media (min-width: 600px) {
  .wp-block-query-loop.is-flex-container li {
      margin-right: 1.25em;
  }
}

3 columns layout styles:

@media (min-width: 600px) {
  .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
      width: calc((100% / 3) - 1.25em + (1.25em / 3));
  }
}

What is your proposed solution?

I believe that by using CSS Grid, we could reduce CSS styles used for this block.

Default styles:

.wp-block-query-loop.is-flex-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.25em;
}

3 columns layout styles:

@media (min-width: 600px) {
  .wp-block-query-loop.columns-3 {
     grid-template-columns: 1fr 1fr 1fr;
  }
}

[ellenbauer]

I want to support the solution to use CSS grid instead of flexbox for the Grid view option.

If this is not an option, maybe we could implement a way for themers to choose if they want to use Grid of flexbox. This way it matched other elements of a theme.

I think the wording 'Grid view' also suggests CSS grid will be used.

[ntsekouras]

Actually there had been discussions about that during the implementation and there were issues for IE support. Now that the support has been dropped, it can be revisited. Also there has been discussions for adding such support through the __experimentalLayout support, although there are no active exploration right now as far as I know.

[ellenbauer]

@ntsekouras Thank you for your reply, that sounds promising. Since IE11 support was dropped it would even make more sense now to hopefully switch to grid instead.

I quickly researched __experimentalLayout and it seems this solution would enable even more creative freedom for developers and themers. I really like it :)

[palmsout]

This sounds like a good idea, but I think any changes to the grid view need to be accompanied by additional options for responsive columns and user defined breakpoints. 3+ columns until 600px is often not great from a readability POV. I suggest at the very least incorporating the option to have three user defined column states (e.g., high res, medium res, mobile) instead of just defining the one state and defaulting to one column on mobile.

[andronocean]

It's worth noting that, with IE out of the picture, a display:grid implementation would actually have better browser support than display:flex. Currently Gutenberg is using the gap property to add space between items in the layout, but browser support for gap in flexbox is several percentage points worse than gap in grid.

Support for flex itself is almost 100% nowadays, so all the users whose browsers do flex but don't do gap-in-flex are seeing a crammed-together layout without margins today. That's something like 7% - 10%, possibly much higher depending on site visitor demographics.

By contrast, there's a much smaller set of browsers that support grid without gap-in-grid. If you also set the older grid-gap property, it would shrink even further.

Browsers entirely lacking grid support — a larger group — could fall back cleanly to the default single-column layout. That's perfect progressive enhancement.

[tellthemachines]

This is definitely being considered! The issue we're using to track that work is #44557; we're looking to implement the grid as a Layout type.

[tellthemachines]

Closing this one in favour of #44557 which has more detailed tracking info.