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

51–60 of 90 posts

Re: CSS Grid changes everything [video]

#51

Post by Scooty »

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've had the opposite experience. I haven't floated anything in years, and I'm constantly running into problems that I can quickly solve using simple combinations of flexbox, margin, and padding.

For the first year or so, I often had to look at this cheat sheet: (https://css-tricks.com/snippets/css/a-guide-to-flexbox/, but now it all feels very intuitive.

The one exception is `align-items: stretch` never works how I expect it to, and I usually end up with a combination of `flex-basis 100%` or `max-width: some px value` with `width: 100%;`

Re: CSS Grid changes everything [video]

#52

Post by Jordanpomeroy »

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…

How do you feel about his advice to people in your position? He suggested that you start with a design for mobile that works on a wider screen. Then use grid to achieve responsive designs. He also suggests that responsive design comprehends browser and browser version (ie don’t always look the same across all browsers). Interested I your thoughts.

Re: CSS Grid changes everything [video]

#53

Post by iteriteratedone »

Bromskloss wrote: post #39
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 love not having to care about whether websites I make work on broken or incapable browsers! :-)

So you like being lazy ... a technical challenge comes your way and you hope others fix it for you.

This is the hipster frontend engineer attitude. Not to be mistakened for real frontend engineers who create robust sites for paying customers. Enjoy your world and ill enjoy the enterprise dollars. I like coding. I dont complain about the challenge.

Re: CSS Grid changes everything [video]

#55

Post by foxhop »

yawgmoth wrote: post #13
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/

cool! I'm stuck on level 28...

update: solved it

Re: CSS Grid changes everything [video]

#56

Post by kybradeck »

bajsejohannes wrote: post #42

Any idea why the grid is 1-indexed instead of 0-indexed?

I believe it's so that you can use -1 to refer to the last gridline. If it was 0-indexed there would be no way to target that final gridline, or there would be a one-off error when using negative numbers.

Example: https://css-tricks.com/things-ive-learned-css-grid-layout/#a...

Re: CSS Grid changes everything [video]

#58

Post by [deleted] »

kybradeck wrote: post #56
bajsejohannes wrote: post #42

Any idea why the grid is 1-indexed instead of 0-indexed?

I believe it's so that you can use -1 to refer to the last gridline. If it was 0-indexed there would be no way to target that final gridline, or there would be a one-off error when using negative numbers. Example: https://css-tricks.com/things-ive-learned-css-grid-layout/#a...

[deleted]

Re: CSS Grid changes everything [video]

#59

Post by _betty_ »

cvsh wrote: post #48
daotoad wrote: post #10

Earlier quoted context omitted.

I've used grid with IE11. You need to add some extra prefixing noise to your css. The way you identify grid elements is different and it sucks to duplicate the layout information. But it most definitely works.

It doesn't with IE10 though. And there's no way to fall back to flex or another column system. Which means, if you need to support IE10, you need a whole parallel set of styles. There's no graceful degradation when it comes to overall site layout, unless you're willing to serve the single-column mobile version to older browsers.

what's wrong with giving older browsers a different experience?

Re: CSS Grid changes everything [video]

#60

Post by ben174 »

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…

It makes more sense when you think of “header” as newspapers think of “headline”.
Post reply on HN