6 ms·
Branching Layouts With Ease
- brainfreez 9y agoI wish I understood this years ago.. Would have saved me .. years
- corgilover90 9y agoAren't you worried because CSS grid isn't supported by a lot of older-traditional browsers, so couldn't this break the user experience.
- JoshTriplett 9y agoThere appear to be many CSS grid polyfills available.
- bpicolo 9y agoWhere? The only one I see is https://github.com/FremyCompany/css-grid-polyfill https://github.com/FremyCompany/css-grid-polyfill which is extremely out of date.
- virmundi 9y agoWhich ones are you referencing, and what is their market share? At some point, the team needs to decide if losing X% of the market due to new technology is worth it.
- pbirsinger 9y agoFlex box is life. But Grids do look pretty powerful
- n0us 9y ago"Flexbox — Getting warmer, but would result in a bunch of extra div elements that act only as containers for the actual content" I feel like I'm the only person who thinks most of CSS grid can be accomplished easily using `flex-grow` and `flex-basis` and it doesn't add that many extra divs. Grid certainly looks more semantic though.
- overcast 9y agoFlexbox and CSS Grid handle different things. Flexbox is for one dimensional layouts. CSS Grid is for two dimensional layouts.
- Scarbutt 9y agoBut if CSS Grid can handle one dimensional layout too, why not just stick to Grid? (ignoring browser compatibility).
- notahacker 9y agoFlexbox handles wrapping pretty elegantly without specifying breakpoints. More to the point, why wasn't a two dimensional layout standard with nice syntax proposed and implemented as a top priority circa 1998 when it was obvious this was how people wanted to design websites, in which case browsers might have caught up by now?
- ben0x539 9y agoi guess they just called it tables back then?
- notahacker 9y agoSay what you like about HTML tables being The Wrong Way To Do Layout Because That Is What CSS Is For, you didn't need to use polyfills or star selector hacks with them...
- ravenstine 9y agoWhat's with all these articles about CSS grid within a few days? I feel like someone who really doesn't like Bootstrap is paying for people to insist that CSS grid is ready for production. Look at this: https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid 78.08% global usage, and that's if you use autoprefixing. That's just pathetic. I'm as much a fan of CSS grid as the next person, but no way I'm going to build a site or an app with it only to have my boss yell at me because ~20% of the audience says the design looks like garbage or doesn't work.
- kemitche 9y agoIf everyone waited for 100% availability, then 100% availability would never come.
- jeremiep 9y agoBut 80% availability is also pretty weak. Especially for CSS stuff where fallbacks are usually hard or impossible to implement cleanly. This isn't javascript where you can just throw a polyfill (and even there, you're usually trading in multiple kilobytes of polyfills for a random feature you could easily have worked around.)
- abritinthebay 9y ago80% availability is pretty much the norm in web dev, historically speaking.
- sebazzz 9y agoOnce you need to support IE11 and have designers/QA that want the product to look as designed, it is not possible to use a less sophisticated layout for non-supporting browsers only. Instead, the layout implemented so that it works in all common browsers including IE11, and I don't need CSS grid anyway (I'm not implementing the layout twice, with all the potential bugs that can happen)
- 9y ago
- Terr_ 9y ago> According to the specs, the finished page should look something like this on desktop: It's ironic how the ASCII art doesn't translate to the site's mobile layout :p
- deleted 9y ago[deleted]
- tgb 9y agoWhat does the title have to do with the article? It links to [1] which seems like a reasonable justification for the title, but it's just an aside. Seems like the article should have been "container divs are tech debt". [1] https://engageinteractive.co.uk/blog/em-vs-rem-vs-px https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
- gaius 9y agoI was hoping this would be about vector displays
- taeric 9y agoI kept waiting for the payoff of the title. What did I miss? Just that you can avoid some coordinate concerns? That is, pixels have become a convenient coordinate space for building a site. If you are willing to actually design more with absolute positioning, many designs become much easier to build up. Instead, we seem to always want to just be more terse, not more explicit. Take the "just float the logo" idea. Why float it? Text isn't supposed to redraw around it, so it isn't really floated into the header. Float is just quicker to type than giving coordinates. None of which is to say the DSL that this gives isn't neat. It is. Some folks actually had DSLs like this for older sites. We just seem to jump through more hoops than makes sense to make things "float" instead of just positioning them directly.
- rco8786 9y agoPlease change the title of this to something even remotely relevant to the actual article contents.
- notjustanymike 9y agoThe author has never heard of mobile first design.
- HelloNurse 9y agoNot the best of articles: an inappropriate title, an inexplicable contrarian example in the middle (the "wacky grid" with non-semantic markup and unreadable names) and too little emphasis on the main technical point: that a CSS grid based layout doesn't need to bother with a hierarchy of container boxes and therefore it can be much more flexible and systematic than more ad-hoc approaches. Can anyone recommend better discussions about what uses CSS grids are good and less good for? This article suggests a strong resemblance with the GridLayoutManager from the Java Swing framework: you can do almost anything, but you'll suffer doing it.
- jdonaldson 9y agoI always get confused between css grid, and gss (grid style sheets). I always liked the constraint based approach in gss, and that it was backwards compatible via js. Has anyone tried both? Is css grid superior in some way?