Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Does CSS Grid Replace Flexbox?

css-tricks.com

Post reply on HN
Print view View original

21–30 of 32 posts

Re: Does CSS Grid Replace Flexbox?

#21

Post by douche »

BigJono wrote: post #20
SippinLean wrote: post #13

Earlier quoted context omitted.

>So your screen-reader enumeration of the document structure is unpolluted by the physical layout which is stored in a separate data structure in a separate language. And that's... good, I guess? Yes, that's very good. You don't have source order independence with either.

Why do we want source order independence? I'm seeing a worrying trend in front-end dev towards things that are "nicer" to "read" but more difficult to actually reason about. I don't understand what benefit we're gaining for removing the relationship between the order of the source code and the order things are rendered. All I see is a negative (it's more difficult to find the place to make an edit later on). As the o…

Eh, they just reproduce paradigms from 30 years ago on the native app side, as the JS crowd does.

Re: Does CSS Grid Replace Flexbox?

#22

Post by frik »

Looking at the CSS Grid examples, I am not sure why? Tables and Divs with reflow can do the same, but with more predictable outcome and less boilerplate.

How about optimising the existing render-paths even more in Blink/Webkit/Gecko instead requiring us to wrap the head around new-but-old things to make it easier for you (the engine devs). Or who else thought it's a good idea to invent yet another syntax. There was a lot of unfounded hate against Tables for the last 15 years, but as we all learned out, Tables have there place.

Re: Does CSS Grid Replace Flexbox?

#23

Post by ry_ry »

Ignoring that they're for quite different tasks - Flexbox's (albeit crappy) support in IE11 makes it more appealing if I was going to pick one of the two.

IE11 still has more users[0] hitting our main site than Edge, so I can see legacy support dragging on for a while yet.

But as pretty much everybody has noted, they do different things so this is more of a hypothetical comparison.

[0] Just checked - Edge 2.9%, IE11 4.2% of ~1.6m visits so far this month.

Re: Does CSS Grid Replace Flexbox?

#24

Post by ry_ry »

frik wrote: post #22

Looking at the CSS Grid examples, I am not sure why? Tables and Divs with reflow can do the same, but with more predictable outcome and less boilerplate. How about optimising the existing render-paths even more in Blink/Webkit/Gecko instead requiring us to wrap the head around new-but-old things to make it easier for you (the engine devs). Or who else thought it's a good idea to invent yet another syntax. There was a…

Tables absolutely have their place... for rendering tabular data!

The idea that tables are "bad" was always semantic FUD, but i like to think we're pretty much over that these days and the fact remains that they're far from ideal for responsive page-level layout and we now have a far more powerful (and meaningful!) toolbox to pick from. The CSS display-table techniques were at best a hack, disguising the presence tables in the markup, but they were still there at an abstract level in all their tabley glory.

The stuff you can do with a handful of lines of flexbox/grid blow a conventional table layout away at the expense of a steeper learning curve. They're honestly worth the effort.

Re: Does CSS Grid Replace Flexbox?

#25

Post by Lio »

SippinLean wrote: post #11
pitaj wrote: post #2

tl;dr: no CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.

That doesn't summarize the article: >it's not impossible to make multi-dimensional layouts in just Flexbox Both are 2D layout mechanisms. You can make Grid act like Flexbox and vice-versa but they have different strengths, and are best used in tandem.

Rachel Andrew has added a very illuminating comments to the article which, I think, highlights why Flexbox can't do what Grid does:-

“Potentially Confusing: a “2D” Layout with Flexbox” – that isn’t a 2d layout. It’s a wrapped flex layout. As soon as you want to make that final box line up with the boxes in the first column you realise what you have isn’t two-dimensional.

Flex wrapping doesn’t make it two dimensional. Each row (in your example) is a flex container itself, space distribution happens across each row individually. Which is why it isn’t two-dimensional.

More here https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-a...

You can also space grid tracks out evenly and so on, box alignment is shared by both the flexbox and grid specifications. For examples of that see http://gridbyexample.com/video/align-grid/

Re: Does CSS Grid Replace Flexbox?

#26

Post by oliwarner »

ajross wrote: post #6

As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout. Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the p…

That separation between markup and presentation language (CSS here) is exactly the point. Kicking all this stuff out into CSS means your markup can mean what you're trying to say.

Using elements should mean you're defining a table with tabular data in it. These new bells and whistles don't change that. You'll still use for tabular data.

And I'm not sure what you mean about native app development. We bitch and moan about the inadequacies of CSS (more its implementation) but layout engines in real programming languages are a total ballache to get along with, especially if you're from a CSS background. You can't just commandeer a table and twist it for your own evil deeds, you have to use one of a finite layouts. Gtk3 is the closest I've found to something I didn't want to stab on sight.

Re: Does CSS Grid Replace Flexbox?

#27

Post by ue_ »

oliwarner wrote: post #26
ajross wrote: post #6

As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout. Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the p…

That separation between markup and presentation language (CSS here) is exactly the point. Kicking all this stuff out into CSS means your markup can mean what you're trying to say. Using elements should mean you're defining a table with tabular data in it. These new bells and whistles don't change that. You'll still use for tabular data. And I'm not sure what you mean about native app development. We bitch and moan ab…

Why must a table be used in such a way, only for tabular data? Sorry if I seem obtuse, but I don't really see the purpose behind semantic elements. Tables were fine for layout with much fewer things that you needed to get right. Wikipedia still uses tables for the layout on the Main Page, for example.

I don't think there is any 'meaning' in the tags that we use, and any meaning implied there is invented as a way to try and match concepts on the screen to things we recognise in real life. I can mean the same thing to a user using tables, because they don't know that it's a table. Can I put a comment like "This table is for layout"? That would also convey meaning, and be a lot easier than messing around with CSS layout.

After a while of trying to get CSS to work with table-like layout, I think I'm going to move back to just using tables in future. At least, until something better than CSS+HTML comes along.

Re: Does CSS Grid Replace Flexbox?

#28

Post by oliwarner »

ue_ wrote: post #27
oliwarner wrote: post #26

Earlier quoted context omitted.

That separation between markup and presentation language (CSS here) is exactly the point. Kicking all this stuff out into CSS means your markup can mean what you're trying to say. Using elements should mean you're defining a table with tabular data in it. These new bells and whistles don't change that. You'll still use for tabular data. And I'm not sure what you mean about native app development. We bitch and moan ab…

Why must a table be used in such a way, only for tabular data? Sorry if I seem obtuse, but I don't really see the purpose behind semantic elements. Tables were fine for layout with much fewer things that you needed to get right. Wikipedia still uses tables for the layout on the Main Page, for example. I don't think there is any 'meaning' in the tags that we use, and any meaning implied there is invented as a way to t…

As a developer who somehow survived the times of frame, imagemap, and table-based layouts, I can promise you, they all had their own issues. Well before semantics, developers and designers needed CSS just to make things possible.

But you're focussing on people and healthy ones at that. Semantics matter a lot less there because you can style anything to look like anything else. But somebody with a screen reader literally needs semantics for accessibility. You set your page up as a table and their screen reader is going to iterate through it like a table.

And things like microformats are soft-semantics that allow your devices to explicitly know that "this thing here is an address", "that's a phone number you can click", and there's a whole bunch of formats for declaring embed data rather than making a service infer it from your actual content.

But if you just can't be bothered, do yourself and your users a favour. Use a framework (eg Bootstrap). It won't be perfect but it'll stop you using tables for layout and that's already a lot better. I can't believe it won't also look better.

Re: Does CSS Grid Replace Flexbox?

#29

Post by SippinLean »

BigJono wrote: post #20
SippinLean wrote: post #13

Earlier quoted context omitted.

>So your screen-reader enumeration of the document structure is unpolluted by the physical layout which is stored in a separate data structure in a separate language. And that's... good, I guess? Yes, that's very good. You don't have source order independence with either.

Why do we want source order independence? I'm seeing a worrying trend in front-end dev towards things that are "nicer" to "read" but more difficult to actually reason about. I don't understand what benefit we're gaining for removing the relationship between the order of the source code and the order things are rendered. All I see is a negative (it's more difficult to find the place to make an edit later on). As the o…

>Why do we want source order independence?

For when things change, for when we want to reorder content without scripting. Why would having it as an option not be preferred?

Re: Does CSS Grid Replace Flexbox?

#30

Post by RandyRanderson »

ajross wrote: post #6

As a systems guy who only occasionally pokes his head into this web stuff: have we now completed the circle? For well over a decade I've seen generations of web hackers rail on about the evils of tables for layout. And now I look at this thing, and... it's a table. For layout. Oh sure, it's a table defined externally to the components. So your screen-reader enumeration of the document structure is unpolluted by the p…

You're assuming HTML, CSS, etc are created/optimized for conveying information. They are in fact optimized to sell books, conference tickets and generation of page views. Iterating on versions, technologies, etc is a wonderful way to make money without ever exposing yourself to the cruel reality of solving problems. You have to hand it to them - a brilliant, if obvious strat.

I can imagine the conversation in some disused conference room going something like:

Organizer: Guys, I think the jig is up, we literally have ran out of new ways to layout a page. I think the string is run on this con.

New guy: Why not just repeat things like they do in fashion? Y'know like bell-bottoms.

Organizer: C'mon these lemming-like developers are not that idiotic.

Old guy: We can always go more dumb. tables v2 it is.

I've often wondered if one reproduced a sample of web pages in OpenGL/C, and compared the compressed source to the equivalent HTML/CSS/JS source, which would be larger?

Post reply on HN