We first had Flexbox as a new solution for building responsive layouts. More precisely on the grids part. Now comes the CSS Grid . My question is: What's the difference between the two? When should I use 1 instead of the other? For building grids for responsive layouts, which one should I choose?
Thank you
If GRID is used more for the entire page (). It will split the entire page into rows and cells (as if it were a large Excel spreadsheet). This GRID was [inter-] invention of Microsoft. But most browsers still do not accept it, only MS EDGE. :
FLEX (display: flex) is most commonly used to center or position < li> 's or < div > 's that are inside another parent div (container). FLEX is the most used today (GRID, which is practically in the test phase). But, attention: FLEXBOX is one thing, the FLEX of display: flex (CSS) is something else. I hope you asked me of the latter, although many call the FLEXBOX FLEX, but it is not correct: FLEXBOX is a framework. FLEX are pure CSS attributes.
Maybe GRID will only be something to get back to the past tables ... It's not being seen as a good alternative by most.
Here's an example of FLEX for centering rows and columns, using flex: link
I recommend you read this: link .
The purposes of flexbox and Grid-layout are different.
The focus is to organize the items in rows or columns, but following the system of "blocks", ie the content will be several rectangles, side by side, or the other.
As the name says, it makes a grid, and serves to organize your items more sophisticated, where each one behaves independently, occupy a number of rows and columns that you stipulate.
Example layout I needed to do:
Themobileversionwastotallydifferentfromthis,butitwasveryeasytoconvert,because,asIsaid,eachitembehavesindependently,soIjustchangedthepositionofeachoneofthemanditwaseasierthanusingany"gambiarra".
Grid-layout problem is IE compatibility, works only in version 11 and not very well, so I use a SASS mixin library that generates for me.
grid-layout-IE11
