css3 – Flexbox substitute as GRID?

Question:

I've been taking a look at the flex properties, and I realized that they do the same thing as the grid or am I wrong? If yes, what is the difference between them? When should I use one or the other?

Answer:

Concepts

Flexbox :

It's part of the CSS3 specification that promises to arrange elements on the page predictably when the layout needs to be viewed across multiple screen sizes and across multiple devices. Flexbox helps to organize these elements without the help of the float and also helps us to solve Box Model problems that normally happen when we add padding , margin and border beyond the element width.

(Source: Flexbox, CSS )

Grid :

It's a structure that allows content to be stacked vertically and horizontally in a consistent and easily manageable way. Furthermore, the code of a grid system is " project-agnostic ", giving it a high degree of portability so that it can be adopted in new projects.

(Source: Grid,Tableless )

Difference

  • Flexbox is essentially for placing items in a single dimension – in a row or a column.

  • Grid is for the layout of items in two dimensions – rows and columns.

When to use?

The two can be used together to get better code. Grid can be used in external areas (header, body, menu, footer) and FlexBox for components.

References:

Scroll to Top