Flex and grid

This is a quick explanation to flex and grid.

I'll try to explain some basic concepts so you can dig deeper later on.

Flex and grid are 2 types of modern CSS display properties.

In the past we had block or inline, now we can do

display: flex;

or

display: grid;

But how does this work?

It took me some time to realize this, but the basic idea is that anything inside a HTML attribute with either flex or grid will behave with the given "effect".

Let me show what I mean with this.

Grid¶

I'll begin with grid because I think it can help make a mental model.

Let's create a class (they are all compatible with tailwind by the way).

.grid {
  display: grid;
}

Now we are gonna use a div as a container of this grid.

<div class="grid"></div>

And I say container, because anything it contains will be