Using Grid Layouts With Elementor

This video shows how to do Grid layouts with Elementor.
It is easier than you might think, using a small set of CSS rules. Linked below.

Grid gives you predictable 2D layouts that it just impossible to replicate with Flexbox.

Note: I Updated the CSS since recording the video.
Under /*Breakpoint Spans*/ There are new responsive rules to reduce spans to X at breakpoints.

[erling]

You are on a roll Mr busy bee
thanks they are very enjoyable

[mrnordjr]

great, but It would be handy to also have the section settings

[tjveach]

Can you show us the link for the css, both bricks and Elementor?

[antonichristian]

this is really nice, good work! but how can i add this css stylesheet so that elementor can use it?

[michaelevans]

You made this way too complicated. Everything you did with CSS can be done with Elementor and no CSS. That's the beauty of containers. Make 2 outside containers one "vertical" and one "horizontal" add another "horizontal" container inside the outside "horizontal" container and duplicate it for as many columns as you want, then duplicate the outside "horizontal" container which will drop down to a second row of columns (because of the outside "vertical" container).
Want another row with only 2 columns (or 3)? Just duplicate an outside "horizontal" container and remove 2 inside horizontal containers, now you have 2 rows with 4 columns and 1 row with 2 columns.
All other settings for # of columns at browser widths are Elementor settings.
No span required at all. All automatic with Elementor. I've done this a hundred times. And with Elementor Pro all the content within the columns can be dynamic.