Simplify CSS grids V3

This is the new iteration on Simplify CSS grids V2 which mainly was using flexbox which is great but we also have display: grid now and that changes the game quite a bit.

Disclaimer i will not go into the deep about how to use css grid or flexbox i would rather refere to css-tricks for that they have these two articles on that subject:

Its super simple i totally got rid of my boilerplate code, and I now user a mixture of vanilla grid and flex. Some cases where i still prefer flex over grid, this normally happens when i have a 1 dimensional grid.

Something like this:

I usally do display: grid on a 2 dimensional grid like the example below:

There is edge cases where i use grids because they solve the issues better in a "less hacky" way could be when i create a component where sometimes it has 1 item within and other times 2 items and when it has 2 items i should have space inbetween; heres an example

Note how i use gap with flex box for the button wrapper, FYI its not super well supported in older Edge browser versions and thats why i tend to use this instead:

.example {
    display: grid;
    grid-auto-flow: column;
    gap: 4px;

So get rid of all of those hacky solutions where you write tons of extra html just to get your grid to obay your needs and start understanding grid & flex and how powerfull those tools are out of the box.