5

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!

Nikhil
  • 417
  • 1
  • 6
  • 16

1 Answers1

1

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.

victor zadorozhnyy
  • 889
  • 1
  • 12
  • 25
  • Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surrounding `semantic-ui-grid` and it is related to the specific case `above created layout`. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I think `semantic grid` is enough for that. I can create complete layout with `flex` but it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes. – Nikhil Nov 11 '18 at 14:28
  • yep I see) my answer is the same. use semantic-ui-grid to make the grid or use any other like bootstrap to make your layout and flex to manage components inside. – victor zadorozhnyy Nov 11 '18 at 14:34