Grid OR Flexboox? if using react-semantic-ui
up vote
2
down vote
favorite
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.
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!
reactjs layout flexbox semantic-ui-react
asked Nov 11 at 6:41
niks
11719
add a comment |
up vote
2
down vote
favorite
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.
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!
reactjs layout flexbox semantic-ui-react
asked Nov 11 at 6:41
niks
11719
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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.
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!
reactjs layout flexbox semantic-ui-react
asked Nov 11 at 6:41
niks
11719
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.
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!
reactjs layout flexbox semantic-ui-react
reactjs layout flexbox semantic-ui-react
asked Nov 11 at 6:41
niks
11719
asked Nov 11 at 6:41
niks
11719
edited Nov 11 at 6:55
asked Nov 11 at 6:41
niks
11719
asked Nov 11 at 6:41
niks
11719
asked Nov 11 at 6:41
niks
11719
11719
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
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.
answered Nov 11 at 7:33
victor zadorozhnyy
251412
Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surroundingsemantic-ui-gridand it is related to the specific caseabove created layout. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I thinksemantic gridis enough for that. I can create complete layout withflexbut it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes.
– niks
Nov 11 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 at 14:34
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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.
answered Nov 11 at 7:33
victor zadorozhnyy
251412
Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surroundingsemantic-ui-gridand it is related to the specific caseabove created layout. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I thinksemantic gridis enough for that. I can create complete layout withflexbut it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes.
– niks
Nov 11 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 at 14:34
add a comment |
up vote
1
down vote
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.
answered Nov 11 at 7:33
victor zadorozhnyy
251412
Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surroundingsemantic-ui-gridand it is related to the specific caseabove created layout. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I thinksemantic gridis enough for that. I can create complete layout withflexbut it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes.
– niks
Nov 11 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 at 14:34
add a comment |
up vote
1
down vote
up vote
1
down vote
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.
answered Nov 11 at 7:33
victor zadorozhnyy
251412
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.
answered Nov 11 at 7:33
victor zadorozhnyy
251412
answered Nov 11 at 7:33
victor zadorozhnyy
251412
answered Nov 11 at 7:33
victor zadorozhnyy
251412
answered Nov 11 at 7:33
victor zadorozhnyy
251412
251412
Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surroundingsemantic-ui-gridand it is related to the specific caseabove created layout. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I thinksemantic gridis enough for that. I can create complete layout withflexbut it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes.
– niks
Nov 11 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 at 14:34
add a comment |
Hey @victor, thatnks for answering but I did not ask for CSS-grid, but my questions surroundingsemantic-ui-gridand it is related to the specific caseabove created layout. So in that image what would you prefer for laying out the base frames ? Would you prefer pulling flexbox in that ? I thinksemantic gridis enough for that. I can create complete layout withflexbut it would be great to know what exactly should be the approach by considering other scanerios, like perfor, consistency and future adaptibility of changes.
– niks
Nov 11 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 at 14:34
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.– niks
Nov 11 at 14:28
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.– niks
Nov 11 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 at 14:34
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 at 14:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246454%2fgrid-or-flexboox-if-using-react-semantic-ui%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
