9 ms·
CSS Grid changes everything [video]
- Someone1234 9y agoIf 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 market-share, talk about unintended consequences... I understand why they didn't but part of me wishes Microsoft had enabled NPAPI in Edge just so we'd at least get modern web standards even if NPAPI is bad and insecure. Instead IE 11's life is now another five years at minimal or until the last Java Applet, ActiveX control, or Flash page disappears. https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid
- ryangallen 9y agoHe talks about that in the video: https://youtu.be/7kVeCqQCxlk?t=1324 https://youtu.be/7kVeCqQCxlk?t=1324
- daotoad 9y agoI'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.
- cvsh 9y agoIt 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.
- _betty_ 9y agowhat's wrong with giving older browsers a different experience?
- ataylor32 9y agoOne scenario I can think of is a non-IE user telling an IE user to go to a particular website and click the button that's at the top of the right sidebar. For the IE user, it might be a stacked layout where the sidebar actually appears under the main content. I would call this a nuisance more so than a major issue, but nevertheless it is something to consider.
- _betty_ 9y agoyou'd have the same issue between a desktop and mobile user. i don't see it as an issue at all.
- ataylor32 9y agoI think the average computer user knows that websites often look different on computers vs. phones, so they might be confused when a website looks different than normal on a computer. Like I said, I would only call this a nuisance. Certainly not a big deal.
- JeanMarcS 9y agoI think it depends of if you need trafic from those browser or not. Because if you do, you'll have to maintain several version, or increase your time on working on it to do gracefull degradation (which is of course a good way to do, but more expensive)
- _betty_ 9y agobut that's kind of the beauty of css grid, the gracefull fallback is basically mobile view which you already put effort into.
- 9y ago
- ko27 9y agoI thought that the current version of Edge (16) supports CSS grid fully. Your link even confirms that.
- teleclimber 9y agoYes I have EdgeHTML16 and my grid-based sites look good.
- Bromskloss 9y agoI love not having to care about whether websites I make work on broken or incapable browsers! :-)
- iteriteratedone 9y agoSo 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.
- wtetzner 9y agoYou seem to be making a lot of assumptions. For all you know, they build websites or applications that don't have any need to run on older browsers, or at the very least, there are diminishing returns. There's always an opportunity cost. While you're building support for older browsers, they could be adding valuable functionality to their software. Which is more valuable depends on the situation.
- Bromskloss 9y ago> Not to be mistakened for real frontend engineers who create robust sites for paying customers. Customers with old browsers? Eww! You keep them; I'm better off without customers. :-)
- Jordanpomeroy 9y agoHow 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.
- deleted 9y ago[deleted]
- Dangeranger 9y agoJen 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/ http://labs.jensimmons.com/ - https://gridbyexample.com/ https://gridbyexample.com/
- yawgmoth 9y agoI personally benefited from http://cssgridgarden.com/ http://cssgridgarden.com/
- codemati 9y agoJust went through this - intuitive and helpful. I'll also add http://flexboxfroggy.com/ http://flexboxfroggy.com/
- maddyboo 9y agoAnd I'm sure everyone knows the original (?) inspiration for these cute little games: http://cssdiner.com/ http://cssdiner.com/
- foxhop 9y agocool! I'm stuck on level 28... update: solved it
- deleted 9y ago[deleted]
- mhink 9y agoIn addition to these, the article "A Complete Guide to Grid" on CSS-Tricks [1] is an excellent reference to use after you've become familiar with the concepts. 1: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- callahad 9y agoAlso worth checking out Jen's new, twice-weekly YouTube Channel, Layout Land: https://www.youtube.com/layoutland https://www.youtube.com/layoutland
- msoad 9y agoI 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
- blueside 9y agoThe 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.
- thinkloop 9y agoI 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.
- Scooty 9y agoI'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/ 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%;`
- munificent 9y agoI 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 <header> and <footer>!". Except that, uh, "header" and "footer" themselves are layout terms. They're just a metaphor for a document as a body ("<body>") with the head at the top and the feet at the bottom. It's not like the contents of a <footer> tag have anything to do with feet. We call it "semantic" simply because the metaphor is old enough that we've internalized it and no longer see it. Not that I think this detracts from the talk at all. Fewer, cleaner tags is good, regardless of how they're spelled.
- flooq 9y agoWe 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 <div> tags rarely matter and "semantic" CSS values don't do anything.
- 52-6F-62 9y agoThey've also been industry standard in publishing for much longer.
- ams6110 9y agoThey are semantic in that <header> differentiates content in a way that <tr> does not, even though it may also have layout implications.
- vanderZwan 9y agoI do not see how the etymology of these words being a layout-metaphor argues against them having more semantic value now? The way you describe a footer makes it sound like the last block of text of any article (being at the bottom) is by definition the footer. Which is of course not the case: it is used for certain types of content. Your own book uses <asides> very heavily[0]. They are not just literally aside the regular flow of the document (actually, about that, see the next paragraph), the type of content in them is different - it is reserved for tangential stuff like jokes or deeper information that would interrupt the pacing of the main narrative. Aside about asides in your book: I bought the epub version when it came out, and although it was a symbolic purchase (I had read the whole thing already as you wrote it), I somewhat regret the format choice due to the sorry state of epub readers. Not all of them even support the aside tag. The one that does (the Firefox Epubreader extension) does not keep a margin for the aside but inlines them. This really disrupts the flow of the text. In traditional book layouts that use the full margin for the text, these asides would be printed as a smaller footnote at the bottom of the page. Surely with the right bit of code one could generate such a layout, based on the semantic meaning of <aside>. But like I said: epub readers are in a pretty sorry state. Should have gotten the pdf instead[1]. [0] http://gameprogrammingpatterns.com/introduction.html http://gameprogrammingpatterns.com/introduction.html [1] http://gameprogrammingpatterns.com/sample.pdf http://gameprogrammingpatterns.com/sample.pdf
- ruairidhwm 9y agoThe Wes Bos course on CSS Grid is free and excellent. Check it out: https://cssgrid.io/ https://cssgrid.io/
- joshfarrant 9y agoWas going to say the same thing. It's a great resource for getting to grips with Grid.
- pg_bot 9y agoAs 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.
- ravenstine 9y agoWho 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.
- kybradeck 9y agoThe video mentions that CSS Grids are used in the production site for the NYTimes. See https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4 https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4.
- pg_bot 9y agoMedical practice management software. (we run the medical practices as well) If we made software that was accessible to the general public I would hesitate to only use CSS grid.
- Animats 9y agoTables. They're back!
- jordanlev 9y agoWrong. Tables impart meaning to user agents (browsers, screen readers, google bots, etc) and as a side effect they have a default visual style that is useful for some layouts in some limited situations (but without any kind of fine-grained detail that most modern designs call for -- ESPECIALLY when making responsive designs that work across different screen widths). CSS Grid, on the other hand, is a tool specifically for complex visual layouts which imparts no semantics on the content (so it is proper to use for non-tabular content).
- Animats 9y agoYeah, yeah, I know the hype. It's just another grid-based layout system. Now if it was a full constraint system, that would be more impressive.
- dredmorbius 9y agoSuch as?
- Animats 9y agoFor a good example, see sketch mode in Autodesk Inventor. Not just boxes - curves.
- dredmorbius 9y agoThanks.
- Animats 9y agoIt's worth trying Inventor (or Autodesk Fusion 360, which is basically a cloud-based Inventor with a free demo) to see a constraint system with a good GUI. Draw lines and make boxes, and if you end a line at an edge, the line endpoint is constrained to that edge. End a line at the endpoint of another line, and those points are constrained to be at the same place. If a line is drawn vertically or horizontally, it's constrained to stay vertically or horizontal. Drag a point or line, and everything else is adjusted, but as little as possible, to maintain the constraints. Specify that two lines must be parallel, or perpendicular, or the same length, and those become constraints. Specify a dimension between two lines or points, and they stay that distance apart. A dimension can have an expression based on other dimensions, so if you need something to be twice the distance of something else, you can do that. This goes beyond straight lines. You can have a circle or arc constrained to touch a line or another circle or arc. A curve can be constrained to be tangent to something else, for a smooth transition. Designers would love that. The GUI won't let you add a constraint that conflicts with another constraints. There's no "constraint priority". All constraints are equal. The GUI has a counter which shows how many degrees of freedom still need to be constrained. Little red arrows show you what can still move. When everything is constrained and nothing can move, the counter changes to "fully constrained", and the sketch is now rigid. But you don't have to go all the way to fully constrained if you don't want to. The system will do something reasonable if you don't. Some sketch dimensions may be driven from another sketch. In the web world, this would correspond to adjusting to window size. The CAD people deal with hard geometry problems, much harder than the ones web layouts face, and they have much better technology for doing it. It's even user-friendly.
- gmiller123456 9y agoI 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"
- eyesee 9y agoI disagree. It is possible to generate a wide variety of layouts using this and other purely declarative approaches. If producing a layout requires the use of "Turing-complete" semantics, then JavaScript is available for the purpose. I would argue if your layout becomes that complex you might consider simplifying. There is a long-standing trend of adding scripting into declarative environments to allow greater capability. More often than not this becomes yet another avenue for exploitation by bad actors. As an industry we should learn from our mistakes and resist the use of executable code into static documents.
- gmiller123456 9y agoI'd agree with you if web pages were "static documents", but they aren't and never were. They've always had to adjust to different screen sizes, and quickly became interactive applications, and now have to adjust to radically different pixel densities.
- The5thElephant 9y agoAnd all of that works just fine with CSS. CSS has problems, but more to do with scoping or lack of a grid-based layout system (until now). When I see devs saying "Just do it all in Javascript" I have to assume they aren't actually that familiar with CSS. First off Javascript simply manipulates CSS properties anyway when it comes to styling, and writing a system that completely ignores CSS and renders its own way is far more complex without any clear benefit.
- ronnier 9y agoIs there a good pollyfill for older browsers?
- gkilmain 9y agoThe speaker suggests serving up mobile layout for older browsers and this is the pattern we are following at my company.
- ausjke 9y agowhat does 'serving up mobile layout' exactly mean? Thanks. yes grid is awesome but how to deal with polyfill is the question
- kinos 9y agoI assume design something akin to just all your elements in a straight line downwards.
- poxrud 9y agoI think it means make your containers 100% width blocks and stack them on top of each other vertically. I will be taking the approach of creating a "good enough" layout for older browsers and a superior layout to modern browsers using "@supports" feature query.
- cryptos 9y agoIt looks like Bootstrap could be reduced to a pure UI component framework now.
- JepZ 9y agoIt's funny, as six month ago I wasn't very fond of the whole "Grid is ready today" talk with ~65% of browsers supporting it. But actually I am glad that within 6 month that percentage seems to have risen by another 10% so that we have ~75% today: https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid And when you take a closer look to the numbers you can see that in another 6 to 12 month the technology should be practically out there in every browser, as the few who will still not have it, will be some mobile browsers which will use the mobile first baseline variant anyway, if you follow the recommendations from the video. Pretty cool stuff.
- bajsejohannes 9y agoAny idea why the grid is 1-indexed instead of 0-indexed?
- gilrain 9y agoIt's much more intuitive for non-programmers, which make up the majority of HTML/CSS users.
- kybradeck 9y agoI 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/#article-header-id-2 https://css-tricks.com/things-ive-learned-css-grid-layout/#a...
- deleted 9y ago[deleted]
- Bromskloss 9y agoCouldn't you still use -1 to refer to the last grid line (or was it grid element)? Python does it, for example.
- kybradeck 9y agoYes, but that would mean the first gridline == 0 and the last gridline == -1, instead of the way the spec is written today, where the first gridline == 1 and the last gridline == -1. For me, consistency wins here.
- TACIXAT 9y agoThe first part of this video totally highlighted all the frustrations I've had with CSS. Super excited to try this on my project.
- esfandia 9y agoReminds me of GridBagLayout in Java Swing. Can anyone here who has experience with both confirm this?
- pvg 9y agoGridBagLayout is an AWT, not Swing thing. The most obvious difference seems to be that people actually like CSS Grid.
- wes-k 9y agoHave yet to dive in to CSS Grids and this really made it clear what pain it is solving. I'm super excited to start using this! Also kudos to the speaker, Morten Rand-Hendriksen, that was a very enjoyable presentation!