News for hackers. Stuff that matters.

A comment on CSS Layout – Grid vs. Flexbox. Parent comment

Re:CSS Layout – Grid vs. Flexbox by keb_ on Tuesday October 13, 2020 @10:39AM (#24765981)
Can you elaborate what constitutes as 1D and 2D in web layouts?
[ Parent | on HN ]
Re:CSS Layout – Grid vs. Flexbox by bradstewart on Tuesday October 13, 2020 @11:21AM (#24766443)
Laying out a set of tabs would be 1D (either horizontal or vertical). Laying out an page with headers, footers, and sidebars would be 2D (vertical and horizontal).
[ Parent | on HN ]
Re:CSS Layout – Grid vs. Flexbox by schwartzworld on Tuesday October 13, 2020 @05:33PM (#24770572)
but headers, footers and sidebars are all trivial with flexbox. what's the advantage of grid in those cases?
[ Parent | on HN ]
Re:CSS Layout – Grid vs. Flexbox by ehutch79 on Tuesday October 13, 2020 @06:43PM (#24771160)
Nope. You're probably abusing flexbox. This layout:

| HEADER | |Nav|Content|Sidebar| | Footer |

is more what we're talking about. You could do that, but it's not what flexbox was meant for. Try grid out. It will work easier for grid like layouts.

[ Parent | on HN ]
Re:CSS Layout – Grid vs. Flexbox by schwartzworld on Tuesday October 13, 2020 @08:21PM (#24771877)
I know what layout you're talking about and it's trivial with flexbox. Why would you need a grid for that?
[ Parent | on HN ]
Re:CSS Layout – Grid vs. Flexbox by bradstewart on Thursday October 15, 2020 @03:58PM (#24793085)
You don't _need_ grid, but it does make it simpler. You technically don't need flexbox either.

In grid you can define this layout in a single construct. Whereas with flexbox, you're defining several nested flex elements to get there.

You can think about the entire layout as a unit, rather than the horizontal parts first (sidebar/main content) then the vertical (header/footer) or vise versa.

[ Parent | on HN ]