Flexbox replaces the GRID?

Asked

Viewed 143 times

3

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 so, what difference does it make? When I should wear one or the other ?

css3 grid flexbox

  • Take a look at this post of Tutorialzine, explains a little about the Bootstrap Grid system (what many people use) and about the Flexbox system. http://demo.tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid/? 1-basic-grid

1 answer

2


Concepts

Flexbox:

It is part of the CSS3 specification that promises to organize elements in the page predictable when the layout needs to be viewed in various screen sizes and in various devices. Flexbox helps to organise these elements without the aid of float and also help us to solve Box Model problems that usually happen when we add, padding, margin and border beyond the width of the element.

(Source: Flexbox, CSS)

Grid:

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

(Source: Grid,)


Difference

  • Flexbox is essentially to place 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?

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


References:

Browser other questions tagged css3 grid flexbox

You are not signed in. Login or sign up in order to post.