Most people get confused between Flexbox and Grid.
But not anymore!
Let me simplify both of them for you, A Thread 𧡠:
But not anymore!
Let me simplify both of them for you, A Thread 𧡠:
While both techniques have different use cases, there are some things you might consider in order to choose one.
Learning both of them can be overwhelming at first, but trust me, it is way easier than you think!
Let's discuss them in a simple way -
Learning both of them can be overwhelming at first, but trust me, it is way easier than you think!
Let's discuss them in a simple way -
Dimensions :
β Flexbox uses a 1-Dimensional layout model for positioning the items and elements.
β That is, the elements are either aligned in the form of rows, or in the form of columns.
β You do not have a third option in the case of flexbox.
β Flexbox uses a 1-Dimensional layout model for positioning the items and elements.
β That is, the elements are either aligned in the form of rows, or in the form of columns.
β You do not have a third option in the case of flexbox.
β Grid uses a 2-dimensionallayout for aligning elements.
β That is, the elements can be aligned in 2 dimensions, a sub-column in a row, or the other way around.
β An HTML element becomes a grid container when its `display` property is set to `grid` or `inline-grid`.
β That is, the elements can be aligned in 2 dimensions, a sub-column in a row, or the other way around.
β An HTML element becomes a grid container when its `display` property is set to `grid` or `inline-grid`.
Overlapping Content :
β In flexbox, you might have to use negative margins and absolute positioning to overlap items, because of which, the code gets messy!
β On the other hand grid can place items overlapping on each other in the same cells!
β In flexbox, you might have to use negative margins and absolute positioning to overlap items, because of which, the code gets messy!
β On the other hand grid can place items overlapping on each other in the same cells!
Wrapping content :
β Flexbox switches to another row for wrapping content around and takes a little more space.
β Grid can wrap content around the same grid lines in the respective row or position as well!
β Flexbox switches to another row for wrapping content around and takes a little more space.
β Grid can wrap content around the same grid lines in the respective row or position as well!
In the end, what to choose?
β Use CSSGrid for multi-dimensional layouts and flexbox for better alignment respectively.
β If the work is in multi-dimensional layouts, use grid! and if it can be done in either a row or a column, use flexbox!
β Use CSSGrid for multi-dimensional layouts and flexbox for better alignment respectively.
β If the work is in multi-dimensional layouts, use grid! and if it can be done in either a row or a column, use flexbox!
β Flexbox has it's unique properties so does grid! but what matters is the use case!
β I am sorry If I confused you more instead of sorting the problem :P but this is the fun part of coding, you have to brainstorm and refine the particular properties in order to make it work
β I am sorry If I confused you more instead of sorting the problem :P but this is the fun part of coding, you have to brainstorm and refine the particular properties in order to make it work
That's a wrap-up for this one π
If you liked this thread :
π Retweet the first tweet
πΈοΈ Follow me for more content @atharvatwts
π Hit the like button and share!
Have a Great Day π
If you liked this thread :
π Retweet the first tweet
πΈοΈ Follow me for more content @atharvatwts
π Hit the like button and share!
Have a Great Day π
Loading suggestions...