Grid OR Flexboox? if using react-semantic-ui

user_2912632 0
Viewed 2583

Currently I am laying down the base of my webpage (which is mobile first also), I have an argument. I have added react-semantic-ui in my react project.

enter image description here

Added is my targetted layout. Now what should I use to plot this, Grid Or Flexbox ? Should I avoid using Grid? Does it slow the rendering or lower the performance ? Or should I use the flexbox at maximum places? Or it shold be consistently using either Grid or flexbox? Or it may be a combination of both. Please guide me.

Thanks in Advance!

semantic-ui-react flexbox reactjs layout
1 Answers

CSS-grid is great for building wide layouts. It can even help in creating asymmetric projects.

Flexbox is great for aligning content inside elements. Use flex to place small details of the project.

Use CSS grids for 2D layouts (rows and columns)

Flexbox works better in only one dimension (rows or columns)

There is no reason to use only one of this. Study them and use together.

user_33155250
Related