"It took about three lines of CSS to write the grid layout I wanted, and I wanted to live in the bright and beautiful future where layout is always that simple."
This is so spot on. I've met many developers who tend to think Bootstrap is easier, but that's usually because they haven't experienced this part of CSS Grid. Just add a couple of lines and you have a very powerful grid layout.
I wrote an article on Bootstrap vs. CSS Grid a few weeks ago btw. Feel free to check it out:
Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more than just a grid. All the components in Bootstrap kinda work together with the .container .row .col classes and that’s still a crazy useful feature.
`caniuse` says "partial" support with prefixes in 11. Anyone have experience of how well it works, with prefixes, how "partial" or compatible the support is?
> I implemented this CSS Grid progressive enhancement on The New York Times Watching media card component. Users on old browsers see Bootstrap, but users on browsers that support the display: grid property
Okay... yeah, I don't want to do that. Workaround with bootstrap or flexbox that don't really do _quite_ what I want as well as grid does... are still better than having to do the workaround _and_ grid, to get all browsers.
> You’re absolutely ready to declare display: grid if you’re the only person contributing code.
I think it's the other way around. If you have a team big enough to do grid _and_ fallbacks with flexbox or float or whatever, you're ready for grid. If you're one person... you probably don't got time for that! If I got to do the good enough fallback anyway, I'd rather just be done then. At least if you're me. Sadly, so goes CSS improvements. In a couple years I can probably use grid. Hey, at least I can finally use flexbox, which is awesome too!
It's about time the web got a decent layout system.
Every UI toolkit that I know of (wxWidgets, Tcl/Tk, Qt) has some form of layout mechanism (box layout, grid layout, etc), and they'd had it for years/decades.
On the web though, people have been hacking around this omission for ages with tables and assorted "grid" systems (pure css, bootstrap, etc).
The needs for layout management was there for as long as I can remember, and this isn't a particularly tough problem to solve (Tcl/Tk has had "pack" since the late 90s, IIRC).
Why the hell did it take so long for the web to come up with a decent layout mechanism?
Because Web browsers originally operated under a document-focused paradigm rather than an application-focused paradigm. (The CSS box model spec makes much more sense if you dig through it with this in mind.) Even after Javascript came out, there wasn't really a notion of a Web application in the modern sense- if you wanted to deliver rich content, the primary way to do it was via Flash or Java applets. I would hazard to say this was the case from around 1995 to 2005?
Anyways, I think the demand for more sophisticated layout systems didn't emerge in earnest until browsers started to experience the paradigm shift from "dynamic text document renderer" to "application runtime environment". If I had to put a date on it, I'd say that this happened during the 2005-2007 period, during which we saw the first big wave of Javascript libraries (including Prototype, jQuery, and MooTools), as well as the launch of the original iPhone _without_ Flash support.
As for the length of time it's taken to release Grid, it looks like W3C has at least been aware of the problem for quite some time- the first "Advanced Layout" Working Draft was published in 2005, but it looks like it didn't stabilize into the current Grid layout until about 2015.
Web development is just starting to catch up to where we were fifteen years ago. Things like type safety, unit testing, and dependency management are still fairly new on the Javascript side of the house, and I'd argue that Maven is lightyears ahead of NPM or pack or gulp or whatever the fuck the kids are using these days.
The UI side is even worse. When you compare $todays_web_framework to QT or Swing, it's like dropping into some terrible alternate timeline where the size of a thing on-screen can only be divined by spraying the proper mixture of cattle bones and chicken entrails on a ouija board beneath a blood moon.
> Why the hell did it take so long for the web to come up with a decent layout mechanism?
Because CSS wasn't originally intended to handle layout (got knows what was but there you are), the W3C was historically a bit of a shit-show (one would argue it still is) and had internal competitors to CSS (hello XSL-FO), then people finally accepted the inevitable but started with something which wasn't quite actually sufficient (flexbox) and still took multiple years to get it not-completely wrong, then there were multiple competing alternatives for whole-page layout (the XUL-derived Template Layout and Microsoft's Grid).
And so we reach 2018, having spent the last 20 years or so doing ad-hoc bits-and-pieces reinventions of half of DSSSL. But it doesn't use S-Expression so I guess that's great.
Well, some specs have been around for a while, but nobody implemented em. For example, I think the first version of flexbox was being proposed at least 10 years ago, but it took a few years for it to get picked up.
If I recall correctly, the initial grid spec was supported by IE10 and IE11, and those were released quite a while ago.
Making big changes on the web is difficult because it requires multiple independent parties to agree and it cannot break backwards compatibility. So you need to define how it all interacts with all the legacy stuff and additionally consider how things will evolve.
Another issue is that CSS has many poor defaults for applications, so developers end up fighting it often.
There's ongoing work to make things better in the future by allowing you polyfill things. Check out the Houdini spec stuff, which lets you define custom styles, layout, etc.
My breakthrough moment for grid UI development was realizing that all of my layout code for a component is contained in the parent – rather than spread around the children.
For example, in bootstrap or some other older layout framework every "column" would need to contain some class or id to style it correctly. So for a 3 column grid you would need to give each element a class setup of something like "column-third".
With grid, all that layout logic is moved into a single container "display: grid" element, making it so much easier to add/remove/edit grid items. Even padding is declared in the container element with the "grid-gap" property! It's a small improvement that has immensely increased my developer experience building grid-like UI.
I'm a recent convert to CSS grid, absolutely love it. There's no dilemma between flexbox + grid; they're complimentary. Just looking forward to full devtools support in Chrome (although Firefox's grid devtools are mighty fine).
So I love CSS Grid very much, but have found myself still wanting/needing masonry-style "Pinterest" layouts, which I haven't been able to do without JavaScript. I've seen many of the CSS column and flexbox hacks, but nothing quite nails it.
'Muuri' [0] is a masonry style library that looks promising (I haven't had time to dig deep though). It does however build on some js libraries but claims backward compability to IE9+. Maybe something for your needs (if js is unavoidable anyway)
CSS grid can do this! Sure not as freedom as a JS implementation but its good enough in 95% of scenarios in my experience! https://codepen.io/balazs_sziklai/pen/mOwoLg (not my code - just one of the examples on codepen)
Until Houdini is available everywhere so that you can hook into the CSS engine and provide your own custom layout managers, I think masonry layouts will always require some JS. Using CSS grids might make the code simpler though.
PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...
Not relevant to the article, but her avatar is very cool - and apparently she generated it with SVG and stylesheets: https://codepen.io/tallys/pen/mPBBXr
Can someone illuminate me as to what are some of the reasons that would make someone style with CSS Grid with a Fallback to Bootstrap?
Considering you are already writing Bootstrap due to compatibility concerns why not just keep using that? I feel like adding another dependency like this would just create a risk of having design differences pop up over time.
Mind you, I don't hate CSS Grid. I really enjoyed learning it, and I look forward to be able to use it in a few years.
It's interesting to now have this, flexbox, and the multi-column module (that I never see anyone talking about).
Does anyone know if this can be used for dynamically wrapping columns? Ostensibly flexbox should be able to handle that, but without an explicit height your column will never wrap.
I recently needed to implement dynamically wrapping columns and I was able to get 90% of what I needed from the multi column module. However it seems to be really buggy at this point, it often ended up with elements sliced in half or missing. Also, the biggest issue for me was no way to target the columns and prevent reordering. I had sections of text that could be expanded or collapsed, and that would trigger a complete rearrangement of columns. Nasty.
I ended up coding my own column system for vertical wrapping, and it was so helpful I was thinking about open-sourcing it, but I'm not sure if CSS grid obviates the need.
As you found out, the CSS multi-column module is not very well specified, and browser support is severly lacking in both features and performance.
Unfortunately... no, there's no better css only alternative. Grids are not supposed to address that use case. For now you are much better off looking at "masonry" javascript implementations, because they actually work and exhibit better performance than css columns.
Just to add what others always mention: CSS Grid and Flexbox are compatible, CSS Grid lays elements in grid, while flexbox handles one dimensional layouts.
To create complex layout you need both and should be familiar with both anyway.
I think we are so familiar with css/html pain that we can't believe to see light in the end of the tunnel. :)
"Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them."
We support Grid by default.
If Autoprefixer see that your CSS is too complicated for IE, it will warn you to disable Grid support and use some JS polyfill.
What I love about the CSS Grid is that it does a really good job of separating content from presentation.
I have used it in one project and it's awesome. What I struggled to do with Bootstrap for almost a week, I could do the same with CSS Grid in an afternoon.
CSS Grid blew me away the first time I saw it. I didn't realize it was ready on the latest browsers. I switched from bootstrap recently to tachyons, this is just another reason to not miss it.
what's the deal with IE11 and CSS Grid? Is it partial support or MS specific notion of CSS Grid? I keeps seeing both sentiments represented with regard to IE.
[+] [-] mrborgen|8 years ago|reply
This is so spot on. I've met many developers who tend to think Bootstrap is easier, but that's usually because they haven't experienced this part of CSS Grid. Just add a couple of lines and you have a very powerful grid layout.
I wrote an article on Bootstrap vs. CSS Grid a few weeks ago btw. Feel free to check it out:
https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881c...
And here is a link to my free CSS Grid course, in case you're interested in learning it:
https://scrimba.com/g/gR8PTE
[+] [-] tnolet|8 years ago|reply
[+] [-] nkkollaw|8 years ago|reply
[+] [-] Waterluvian|8 years ago|reply
[+] [-] jrochkind1|8 years ago|reply
`caniuse` says "partial" support with prefixes in 11. Anyone have experience of how well it works, with prefixes, how "partial" or compatible the support is?
> I implemented this CSS Grid progressive enhancement on The New York Times Watching media card component. Users on old browsers see Bootstrap, but users on browsers that support the display: grid property
Okay... yeah, I don't want to do that. Workaround with bootstrap or flexbox that don't really do _quite_ what I want as well as grid does... are still better than having to do the workaround _and_ grid, to get all browsers.
> You’re absolutely ready to declare display: grid if you’re the only person contributing code.
I think it's the other way around. If you have a team big enough to do grid _and_ fallbacks with flexbox or float or whatever, you're ready for grid. If you're one person... you probably don't got time for that! If I got to do the good enough fallback anyway, I'd rather just be done then. At least if you're me. Sadly, so goes CSS improvements. In a couple years I can probably use grid. Hey, at least I can finally use flexbox, which is awesome too!
[+] [-] Bizarro|8 years ago|reply
Is IE 10 even relevant these days? It seems that except for very outdated systems, everybody should have been autoupdated to IE 11 by now
[+] [-] disconnected|8 years ago|reply
Every UI toolkit that I know of (wxWidgets, Tcl/Tk, Qt) has some form of layout mechanism (box layout, grid layout, etc), and they'd had it for years/decades.
On the web though, people have been hacking around this omission for ages with tables and assorted "grid" systems (pure css, bootstrap, etc).
The needs for layout management was there for as long as I can remember, and this isn't a particularly tough problem to solve (Tcl/Tk has had "pack" since the late 90s, IIRC).
Why the hell did it take so long for the web to come up with a decent layout mechanism?
[+] [-] mhink|8 years ago|reply
Anyways, I think the demand for more sophisticated layout systems didn't emerge in earnest until browsers started to experience the paradigm shift from "dynamic text document renderer" to "application runtime environment". If I had to put a date on it, I'd say that this happened during the 2005-2007 period, during which we saw the first big wave of Javascript libraries (including Prototype, jQuery, and MooTools), as well as the launch of the original iPhone _without_ Flash support.
As for the length of time it's taken to release Grid, it looks like W3C has at least been aware of the problem for quite some time- the first "Advanced Layout" Working Draft was published in 2005, but it looks like it didn't stabilize into the current Grid layout until about 2015.
[+] [-] thomascgalvin|8 years ago|reply
The UI side is even worse. When you compare $todays_web_framework to QT or Swing, it's like dropping into some terrible alternate timeline where the size of a thing on-screen can only be divined by spraying the proper mixture of cattle bones and chicken entrails on a ouija board beneath a blood moon.
[+] [-] masklinn|8 years ago|reply
Because CSS wasn't originally intended to handle layout (got knows what was but there you are), the W3C was historically a bit of a shit-show (one would argue it still is) and had internal competitors to CSS (hello XSL-FO), then people finally accepted the inevitable but started with something which wasn't quite actually sufficient (flexbox) and still took multiple years to get it not-completely wrong, then there were multiple competing alternatives for whole-page layout (the XUL-derived Template Layout and Microsoft's Grid).
And so we reach 2018, having spent the last 20 years or so doing ad-hoc bits-and-pieces reinventions of half of DSSSL. But it doesn't use S-Expression so I guess that's great.
[+] [-] TheAceOfHearts|8 years ago|reply
If I recall correctly, the initial grid spec was supported by IE10 and IE11, and those were released quite a while ago.
Making big changes on the web is difficult because it requires multiple independent parties to agree and it cannot break backwards compatibility. So you need to define how it all interacts with all the legacy stuff and additionally consider how things will evolve.
Another issue is that CSS has many poor defaults for applications, so developers end up fighting it often.
There's ongoing work to make things better in the future by allowing you polyfill things. Check out the Houdini spec stuff, which lets you define custom styles, layout, etc.
[+] [-] ty___ler|8 years ago|reply
For example, in bootstrap or some other older layout framework every "column" would need to contain some class or id to style it correctly. So for a 3 column grid you would need to give each element a class setup of something like "column-third".
With grid, all that layout logic is moved into a single container "display: grid" element, making it so much easier to add/remove/edit grid items. Even padding is declared in the container element with the "grid-gap" property! It's a small improvement that has immensely increased my developer experience building grid-like UI.
[+] [-] chiefalchemist|8 years ago|reply
[+] [-] aloukissas|8 years ago|reply
[+] [-] angrymouse|8 years ago|reply
In the past I would have lazily used bootstrap as I've used that for over three years and know the grid inside out.
It was a touch intimidating at first. No framework!
But it is really quite expressive. It took me 12 lines of CSS to get a traditional blog layout that collapsed on mobiles.
[+] [-] sinistersnare|8 years ago|reply
[+] [-] jasonbarone|8 years ago|reply
Anyone have any good ideas here?
[+] [-] stareatgoats|8 years ago|reply
[0]https://haltu.github.io/muuri/
[+] [-] jonnyscholes|8 years ago|reply
[+] [-] spiralx|8 years ago|reply
PS I think Smashing Magazine have an overview of Houdini with a masonry layout as an example...
[+] [-] andrei_says_|8 years ago|reply
[+] [-] pavel_lishin|8 years ago|reply
[+] [-] spaceseaman|8 years ago|reply
Did the writer hand make the individual polygons or generate it from an image of themselves?
[+] [-] Zyst|8 years ago|reply
Considering you are already writing Bootstrap due to compatibility concerns why not just keep using that? I feel like adding another dependency like this would just create a risk of having design differences pop up over time.
Mind you, I don't hate CSS Grid. I really enjoyed learning it, and I look forward to be able to use it in a few years.
[+] [-] nkozyra|8 years ago|reply
Generous interpretation: graceful upgrade when CSS grid has sufficient browser support.
Realistic interpretation: to work with the 'new hot' and not the 'old stodgy'
[+] [-] ak39|8 years ago|reply
[+] [-] pdog|8 years ago|reply
[+] [-] arunitc|8 years ago|reply
[+] [-] TipVFL|8 years ago|reply
Does anyone know if this can be used for dynamically wrapping columns? Ostensibly flexbox should be able to handle that, but without an explicit height your column will never wrap.
I recently needed to implement dynamically wrapping columns and I was able to get 90% of what I needed from the multi column module. However it seems to be really buggy at this point, it often ended up with elements sliced in half or missing. Also, the biggest issue for me was no way to target the columns and prevent reordering. I had sections of text that could be expanded or collapsed, and that would trigger a complete rearrangement of columns. Nasty.
I ended up coding my own column system for vertical wrapping, and it was so helpful I was thinking about open-sourcing it, but I'm not sure if CSS grid obviates the need.
[+] [-] kilburn|8 years ago|reply
Unfortunately... no, there's no better css only alternative. Grids are not supposed to address that use case. For now you are much better off looking at "masonry" javascript implementations, because they actually work and exhibit better performance than css columns.
[+] [-] Bizarro|8 years ago|reply
https://medium.freecodecamp.org/heres-my-free-css-grid-cours...
[+] [-] desireco42|8 years ago|reply
To create complex layout you need both and should be familiar with both anyway.
I think we are so familiar with css/html pain that we can't believe to see light in the end of the tunnel. :)
[+] [-] caffodian|8 years ago|reply
I've seen fallback CSS and JavaScript polyfills used.
[+] [-] buovjaga|8 years ago|reply
"Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them."
[+] [-] lemonberry|8 years ago|reply
https://www.smashingmagazine.com/2017/11/css-grid-supporting...
[+] [-] Bizarro|8 years ago|reply
This comment is from two years ago:
But I think I found a solution for everyone:
We support Grid by default. If Autoprefixer see that your CSS is too complicated for IE, it will warn you to disable Grid support and use some JS polyfill.
[+] [-] dmitriid|8 years ago|reply
[1] http://lostgrid.org
[+] [-] pbhjpbhj|8 years ago|reply
[+] [-] leeoniya|8 years ago|reply
[+] [-] robertkrahn01|8 years ago|reply
[+] [-] kumarvvr|8 years ago|reply
I have used it in one project and it's awesome. What I struggled to do with Bootstrap for almost a week, I could do the same with CSS Grid in an afternoon.
[+] [-] swlkr|8 years ago|reply
[+] [-] unknown|8 years ago|reply
[deleted]
[+] [-] jordache|8 years ago|reply