Creating a Responsive Gutenberg Price Table – Joe Casabona

Last week I worked on an upcoming tutorial for a popular online publication on how to style the Gutenberg Columns block (I’ll be sure to send that along when it comes out). As as result, I decided to experiment to see what you could reasonable do, and came up with this Gutenberg Price Table: https://codepen.io/jcasabona/pen/RYvEYd. In this tutorial, we’ll go over some of the things we need to do to make this happen. Requirements
There are few requirements / constraints:
Only use Gutenberg markup – no additional HTML or Javascript
It has to be responsive
The stacking order for the columns needs to reflect content priority (e.g., the most important package should be the top one)
?While I won’t do a full blown tutorial on how I did this (you can look for the upcoming tutorial for that), I will highlight some important parts aspects.
How Gutenberg Columns Work
There are three things to know about Gutenberg Columns:
At the time of this writing, they use Flexbox. Originally they used CSS Grid, but the core team decided to switch to ?Flexbox for the better browser support
There are 2 classes by default: wp-block-columns for the overall columns container and wp-block-column
Source: https://managewp.org/articles/17902/creating-a-responsive-gutenberg-price-table-joe-casabona

source https://williechiu40.wordpress.com/2018/09/24/creating-a-responsive-gutenberg-price-table-joe-casabona/