Talk about the Structure of a website, Talk about the website Layout

After I learnt about using Flexbox and CSS Grid on my fun projects coding along with Andrei Neagoie, the next big challenge was which to use amongst the both. Most times to choose between Flexbox and CSS Grid I check my last project and i’m like

I used CSS Grid the last time so i’m definitely making use of Flexbox.

Oh no! That's not really how it works I discovered, Flexbox and CSS Grid were actually made to complement each other. Flexbox being the older was there before CSS Grid came with features not found in Flexbox but still lacking some features Flexbox had. Lets check the both out.

Flexbox

Flexbox is basically one dimensional, maybe you are thinking of doing layouts based on rows only and you don’t care whether they line up with the columns as well or perhaps you want the item on a particular row to fill the entire row.

Here, the columns do not align with the rows and the items on the 2nd row fills the entire row

CSS Grid

CSS Grid is basically powerful when it comes to two dimensional, when you are thinking of your web layouts both in column and rows.

Notice both the rows and columns align

Still considering which to use?

Like we said earlier, Flexbox and CSS Grid complement each other, you simply need to know when to pull a particular plug.

• Use CSS Grid over Flexbox when you want to place items over each other or where ever you want.

The y item is positioned to overlap the x item and the z item at same time is positioned to overlap the y item

• Use Flexbox over CSS Grid when you are considering browser support. When you check out caniuse, you discover Flexbox has a wider range of modern browser support and a partial support of older browsers.

Use the URL below to get the latest image of Flexbox support

https://caniuse.com/#search=flexbox%20layout

Flexbox browser support

Use the URL below to get the latest image of CSS Grid support

https://caniuse.com/#search=css%20grid%20layout

CSS Grid browser support

Pulling the both plugs

When you combine CSS Grid and Flexbox you could produce some powerful web layouts since each of them has their super strengths as we have seen earlier.

CSS Grid + Flexbox in Action

When you scroll through udemy courses you will probably notice this

These card layouts of courses students are viewing can be a typical example of CSS Grid + Flexbox in Action. Here, CSS Grid controls the layout and position of the cards while Flexbox controls the content of each card by aligning the content position.

See a typical code snippet showing CSS Grid + Flexbox in Action

In conclusion, its best you get to know the both really well, because most of the web browsers are moving towards CSS Grid and Flexbox, eventually they will get good support.

This is my first post on Hashnode devblog. Your motivation counts!