CSS Grid for WooCommerce Products List

The CSS that WooCommerce adds for arranging the products in a grid in product listings on the front end is unfortunately stuck in the 90s with floats and widths for list items etc.

In this members-only tutorial you can find the CSS for the products list using automatic responsive CSS Grid without media queries.

Adding the code as is in Oxygen does not, by itself have any benefits since we are essentially overriding WooCommerce' CSS. If anything, it is actually superfluous and adds a tiny bit of extra load.

The true benefit is only when all WooCommerce front end CSS is disabled via this code snippet:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

But note that when you do that, your site's WooCommerce pages are going to look unstyled. So this tutorial is really only useful if you truly want to unload the entire WooCommerce CSS and style it yourself.

With that said, here's the CSS. Add it in a Stylesheet at Manage > Stylesheets in the Oxygen editor.