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

CSS Grid changes everything [video]

youtube.com

Post reply on HN
Print view View original

11–20 of 90 posts

Re: CSS Grid changes everything [video]

#11

Post by blueside »

msoad wrote: post #4

I worked with CSS Grids back in 2010 when I was working on a Windows 8 app. Since then I hated any other constraint resolver including Box Model, iOS Auto Layout and Flexbox model. CSS Grid is so intuitive you forget how difficult this problem has been in the history of UI engineering

The intuitiveness of CSS Grid is the major appeal for me.

I've worked with Flexbox for the last few years and still regularly have to look up the Flexbox reference pages. Perhaps it's just me, but I have found the whole Flexbox naming scheme anything but intuitive.

Re: CSS Grid changes everything [video]

#12

Post by ko27 »

Someone1234 wrote: post #2

If you need to support IE 10, 11, or Edge then Grid is broken. Microsoft's browsers follow an older spec than Chrome/Safari/Firefox. Microsoft are going to fix Grid in Edge 17, but no release date yet. Unfortunately this is my life right now. When Chrome and Firefox dropped support for NPAPI a lot of enterprise customers intentionally moved their users back to IE 11. The loss of NPAPI has ironically increased IE 11's…

I thought that the current version of Edge (16) supports CSS grid fully. Your link even confirms that.

Re: CSS Grid changes everything [video]

#13

Post by yawgmoth »

Dangeranger wrote: post #3

Jen Simmons and Rachel Andrew have done really great work on making CSS Grid sensible to comprehend. I cannot recommend their resources enough. - http://labs.jensimmons.com/ - https://gridbyexample.com/

I personally benefited from http://cssgridgarden.com/

Re: CSS Grid changes everything [video]

#15

Post by 52-6F-62 »

flooq wrote: post #6
munificent wrote: post #5

I giggle a little bit inside when web designers say "We shouldn't use meaningless tags that exist only for layout. We should use semantic ones, like and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

We call them semantic because they have extra technical meaning in HTML (built in WAI-ARIA roles for example). For example, browsers expose them as landmarks for screen readers. That said there are a lot of similar examples of magical beliefs that are unfounded. Extra tags rarely matter and "semantic" CSS values don't do anything.

They've also been industry standard in publishing for much longer.

Re: CSS Grid changes everything [video]

#16

Post by ravenstine »

pg_bot wrote: post #8

As someone who recently converted to using CSS grid for my company, I can't imagine going back. It really reduces the mental overhead when building complex layouts and has made my code shorter and easier to understand.

Who is the target audience of your company? The reason I ask is that I highly doubt I could use CSS grid at my company(news outlet) without breaking the site for many of the users.

Re: CSS Grid changes everything [video]

#17

Post by ams6110 »

munificent wrote: post #5

I giggle a little bit inside when web designers say "We shouldn't use meaningless tags that exist only for layout. We should use semantic ones, like and !". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body (" ") with the head at the top and the feet at the bottom. It's not like the contents of a tag have anything to do with feet. We call it "semantic…

They are semantic in that differentiates content in a way that does not, even though it may also have layout implications.

Re: CSS Grid changes everything [video]

#18

Post by thinkloop »

blueside wrote: post #11
msoad wrote: post #4

I worked with CSS Grids back in 2010 when I was working on a Windows 8 app. Since then I hated any other constraint resolver including Box Model, iOS Auto Layout and Flexbox model. CSS Grid is so intuitive you forget how difficult this problem has been in the history of UI engineering

The intuitiveness of CSS Grid is the major appeal for me. I've worked with Flexbox for the last few years and still regularly have to look up the Flexbox reference pages. Perhaps it's just me, but I have found the whole Flexbox naming scheme anything but intuitive.

I haven't built a site in the last 5 years without flexbox and not a single time was I able to interact with it without referring to docs, then still randomly iterating through property values in the inspector until it looked right. That's basically my official process. Luckily the problem space is simple enough for that to be efficient, and only a couple of properties are needed 90% of the time.

Re: CSS Grid changes everything [video]

#19

Post by teleclimber »

ko27 wrote: post #12
Someone1234 wrote: post #2

If you need to support IE 10, 11, or Edge then Grid is broken. Microsoft's browsers follow an older spec than Chrome/Safari/Firefox. Microsoft are going to fix Grid in Edge 17, but no release date yet. Unfortunately this is my life right now. When Chrome and Firefox dropped support for NPAPI a lot of enterprise customers intentionally moved their users back to IE 11. The loss of NPAPI has ironically increased IE 11's…

I thought that the current version of Edge (16) supports CSS grid fully. Your link even confirms that.

Yes I have EdgeHTML16 and my grid-based sites look good.

Re: CSS Grid changes everything [video]

#20

Post by gmiller123456 »

I wonder if I'm alone in the opinion that whatever method is used to create a complex layout, the method needs to be Turing Complete. I can understand the appeal of being able to create some tags and not having to worry about what happens after that, but you really only end up with a good design if you're just trying to do something simple. We often see people so devoted to the idea of CSS they end up with something incredibly complicated that could have been done in just a handful of lines of code.

edit: Fixed spelling of "Touring"

Post reply on HN