11 ms·
CSS Grid Level 2 – subgrid is coming to Firefox
- theklr 7y agoOnce you wrap your head around how grid works (especially with fr) it's a godsend. I'm glad css is maturing in a way that actually meets the layout needs of a device.
- duxup 7y agoI keep dipping my toes in grid but not long enough to commit and I run back to flexbox. I feel like flexbox was such a savior already that I'm still comfortable there.
- galaxyLogic 7y agoYes flex is cool because you don't need a new type of element just add the property "display: flex" to anything. I think Grid is a bit more complicated, more to learn. CSS is getting better but at the same time it's getting more complex in total.
- duxup 7y agoIt makes sense. Flex was finally FOR (I think it was for) layout, from the start. It's simple, works for a lot of use cases. Grid is for layout, but serious layout. It's good to have both.... well anything really considering the history.
- bobthepanda 7y agoGrid doesn’t really use a new type of element either. I’m just happy to be able to layout things 2D in a way that isn’t totally bonkers and do weird contrived calculations to make everything fit in the viewport. My only wish remaining is a unit that is like fr for grid layout but can be the same value for both row and grid (so an equivalent to vmin for viewport)
- nicoburns 7y agoI actually think grid is simpler. The flex properties are confusing and make common cases complicated. Grid fits my mental model of what I am trying to achieve pretty much 1:1.
- castis 7y agoOh man if you like flexbox, I'd definitely take the time to really get in there on grid. Learning to mix the two together has been amazing.
- tenaciousDaniel 7y agoYep. I was able to pull off a UI pattern that never would have been possible in legacy css. It's pretty rad.
- chrismorgan 7y agoI’ll bite. In my experience, almost every case where CSS Grid has been touted as enabling something new was actually already possible with flexbox alone. Care to share your UI pattern that I gather uses Grid and Flexbox, and I’ll see if I can reasonably reproduce it without Grid?
- rossy 7y agoI don't know what he's done, but I think an obvious use case is this grid list: https://codepen.io/anon/pen/xNNXBR https://codepen.io/anon/pen/xNNXBR Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
- codedokode 7y agoCannot this be done with just floats or inline-blocks and percentage width? Unlike grid, it would work in a larger number of browsers. Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
- 7y ago
- tlrobinson 7y agoI can recommend "The New CSS Layout" for getting up to speed on CSS Grid (among other modern and legacy layout techniques): https://abookapart.com/products/the-new-css-layout https://abookapart.com/products/the-new-css-layout It does mention subgrid too.
- mmanfrin 7y agoLooks like the author of that is also the author of this post.
- thirdsun 7y agoYou will find her name quite often when you research CSS grids - she's something of a layout and grid expert. If you'd like to read more, check out some of her fantastic posts at Smashing Magazine, where she's chief editor: https://www.smashingmagazine.com/author/rachel-andrew/ https://www.smashingmagazine.com/author/rachel-andrew/
- netwanderer3 7y agoThough both are used for laying out your content, but Grid and Flexbox serve different purposes though. We can probably still use Flexbox for majority of the cases, but Grid was designed to help with some specific CSS layout problems that only it could resolve.
- Vanderson 7y agoI would suggest finding a single use for grid that flexbox doesn't really do well, and use only a couple properties. Then you will really understand the benefit of grid without having to invest a lot of time. An example I dealt with recently: I needed a header with logo / external link / social icons/ content / phone link. All to layout perfectly, and be mobile friendly. With grid, I used this: (this is rough code to demonstrate the simplicity, I made a codepen demonstrating it properly. [0]) header { display: grid; grid-template-areas: "logo content link social" "logo content phone phone"; } For each of the logo, content, etc... areas you use this to attach it to the specific location in the grid. .logo { grid-area: logo; } .content { grid-area: content; } etc... You end up with exactly what you would expect: +------+---------+-------+--------+ | | | link | social | + logo + content +-------+--------+ | | | phone | +------+---------+-------+--------+ For mobile, I wanted this: +---------------+ | Logo | +---------------+ | Content | +------+--------+ | Link | Social | +------+--------+ | Phone | +---------------+ Here's the only CSS needed for mobile. (or reverse this if you are doing mobile first layout) @media (mobile) { header { grid-template-areas: "logo logo" "content content" "link social" "phone phone"; } } Here's the html: <header> <div class="logo" ></div> <div class="content"></div> <div class="link" ></div> <div class="social" ></div> <div class="phone" ></div> </header> The power to move content around with such simple and clean code like this is amazing. With flexbox you can use the "order" property to move stuff around a little, but not control the exact layout so cleanly and simply. There are tweaks for adjusting the widths of columns and heights of rows, but this is generally all that is needed to get the layout with grid. There is also grid-gap [1], something not possible in flexbox yet. (though Firefox supports grid-gap with flexbox) [1] https://codepen.io/Vanderson/pen/yWWVVZ https://codepen.io/Vanderson/pen/yWWVVZ [1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap
- pbhjpbhj 7y agohttps://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid (92% of users)
- shawnz 7y agoFlexbox can't fully replace grid, or vice versa. In particular, this very feature, subgrids, can't be reproduced with flexbox.
- nivenhuh 7y agoflexbox works beautifully with grid
- rambojazz 7y agoThey solve different problems however. They are complementary, not substitutes.
- robdachshund 7y agoMixing the two is very useful. I typically make headers and footers with flex, build home page grids with grid, and then use flex to space out content in the cells. No more floats, no more percent widths, no more weird nth child tweaks for positioning. Add rems to the mix and responsive design has never been simpler. For grids you can just change from say a 3 column grid to a single column on mobile for most cases. And the best part, no bootstrap.
- codedokode 7y agoSadly the article with examples doesn't provide a fallback for older browsers and as frontnend devs usually just copy the code from tutorials without much thinking, it means that we are going to see a lot of new sites breaking in just 2 or 3 years old browsers. The usual sad state of web development is going to become even sadder. Articles about flexbox have the same problem by the way.
- robdachshund 7y agoI've stopped caring about people on ie or some super outdated browser version. None of my projects have an audience that includes 90 years olds using ie6 on windows xp. I assume my users are on some chrome derivative that is fairly up to date. I'm not going to use this until it's well supported, but I'll have no qualms going so. I certainly am not worried about anything I've used flex or grid for... they've been out for quite awhile now. I'm not sure why we are all trained to think that anything we build has to be compatible with old browsers that essentially no one is using. For most projects, I don't see a point unless you have some really specific requirements.
- dspillett 7y ago> anything we build has to be compatible with old browsers that essentially no one is using I think similarly, with the caveat that anything that might be useful to me at work (current or future day jobs) needs to consider IE11 because there are a lot of people out there stuck using that (we work with banks a lot, while it is increasingly common for recent-ish Chrome to be available too it is not close enough to ubiquity for comfort). This includes anything that I might want to log into myself from a client's site, where I might not be able to use my own device, not just that I might expect/want them to use. > I assume my users are on some chrome derivative that is fairly up to date Be careful just testing in Chrom{e|ium}. We are in danger of heading into what is effectively another period of browser mono-culture, especially now MS have thrown in the towel. I'd at least support "recent Chrome/Chrome-ish and recent Firefox". While chants of "the next IE6" are a bit hyperbolic, if a mono-culture, or something close to one, forms it will create future issues no matter how good are the intentions of the controller of the "winner". I'd like to support Safari too but unless Apple provides a way of running that locally without having to buy their hardware or buy their OS then fight to get it running in a VM that isn't going to happen outside of commercial projects where someone else is paying for the resources to allow it to happen.
- Theodores 7y ago'display: contents' works nicely for the first noddy example, with the subsequent 'cards' example that is where the magic of subgrid needs to be understood and used. Could be a while though, what is the bet that Safari will be last to get subgrid?
- bobthepanda 7y agoSafari is the last to get anything most of the time. Apple really needs to step up their game, especially if they want to shove people into PWAs.
- sdegutis 7y agoThey're in no hurry to encourage PWAs, it takes people away from the App Store which is how they get a substantial amount of money.
- dan1234 7y agoSafari got grid support within 3 weeks of Chrome, so there’s reason to be optimistic.
- Theodores 7y agoBlink! I think that since Google forked Webkit things have only made it into Chrome to then appear later in the other browsers. But you never know.
- runarberg 7y ago`display: content` still wrongly removes the content from the accessibility tree in all browsers except firefox. This is a serious bug but it doesn’t look like the other browser vendors are too keen on fixing it. But until it is fixed in the rest of the major browsers, one cannot actually use this feature for anything except prototyping. https://caniuse.com/#feat=css-display-contents https://caniuse.com/#feat=css-display-contents
- chenster 7y agoShould we really leave such complex logic to CSS? What if you need level 3, 4..?
- shawnz 7y ago"Level 2" doesn't mean you can only nest them 2 deep. It's just a newer version of the specification
- couchand 7y agoPSA: please please please test your grids on a variety of window sizes and aspect ratios. Poor grid design is now the most common issue I see on web usability reviews of greenfield projects. To cite just a recent example from yesterday's Hacker News front page: https://nationalparktypeface.com/ https://nationalparktypeface.com/
- saidajigumi 7y agoBeyond just grids, any layout, explicitly responsive or not. Fire up your browser's Responsive Design Mode and play around with the window width. The basics are generally easy to fix if you take a minute or two to spot check your layouts.
- ketzo 7y agohttps://cssgridgarden.com/ https://cssgridgarden.com/ is a fantastic site to get more intuitive understanding of `display: grid;`, can't recommend it enough.
- Anonymous4C54D6 7y agoOh...oh...the numbering is 1 based. O_o
- rhizome 7y agoI'm at the point where I don't want to hear about anything that involves (or implies) a vendor prefix.
- maddyboo 7y agoVendor prefixes are no longer being used for new features - flags and preview releases are the new way browsers release draft features like this. CSS grid level 2 is a W3C draft design which, if accepted, will make its way into all browsers.
- rhizome 7y agoYou know what I mean, it's why I included "implies."
- temp129038 7y agoI feel like flexbox works better for how I think about building apps in that I'm usually working on one feature at a time, not "laying out" an entire 2d page at once.
- zanny 7y agoUse what you think is right for the job, I have found many uses for grid in the last year that make web development a lot less migraine inducing.
- sosodev 7y agoFlexbox is easier, but I think grid produces better results
- antoniuschan99 7y agoFlexbox is 1 dimensional vs grid which is 2. Use both. I just implement a Kanban type of UI at work. The main layout uses grid and the cards itself uses flexbox
- b212 7y agoI know flexbox and more or less grid but I feel like old good display inline-block and positioning is still 50x faster for prototyping and often development. Especially flex made simple things really complicated, like you have two quite long and totally unrelated properties for aligning items horizontally and vertically. And the fun really begins when you inherit codebase after someone else - even making item 100% wide is sometimes incredibly hard with flex (width: 100% does not work!). And from my experience grid is even bigger hell to maintain. Especially if many devs work with it and some of them are not really CSS wizards.
- runarberg 7y agoIf you name your grid areas—I find grid quite elegant and easy to maintain. Also I often find that the number one reason for hard to style scenarios, is overly complected markup with deep div soups and other non-semantic container elements.
- myfonj 7y agoI find it mildly amusing that until advent of this cutting edge subgrid feature it wasn't possible to get simple "table-like" cards with matching "header - body - footer" of dynamic heights: +---+ +---+ +---+ |1H | |4H | |7H | | H | | | | | +---+ +---+ +---+ |2B | |5B | |8B | | | | B | | | +---+ +---+ +---+ |3F | |6F | |9F | | | | | | F | +---+ +---+ +---+ To get this you had to either compromise semantics (use [1,4,7],[2,5,8],… table) or resort to JavaScript (read computed dimensions, find tallest and unify rest). Graphic designers use this pattern very often. Finally coders will not have to worry about it anymore, soon. After 22 years of CSS.
- feb3_nob 7y agoAbsolutely! This case hit very close to home with me. I remember once trying for an entire long weekend to solve it with flex/grid to no avail; only to be disappointed at having to use JS for such a 'trivial' task. This made me super happy!
- GordonS 7y agoTo be more specific, the article doesn't say this isn't possible with CSS, but that it isn't possible with nested grids. Which, of course, doesn't mean it's easy or even sane to implement in CSS...
- myfonj 7y agoFor variable amount of "cards" that could eventually wrap this really is not possible to do in pure CSS without subgrid, as sibling comment confirmed. It is possible for fixed amount of cards: simple grid with named areas; it is possible for variable amount of cards when at least two of its components (e.g. header and footer) have fixed height: flex (or grid). Once you have to match more than one variable dimension across two axis (headers/bodies/footers laid in vertical axis matching their "siblings" in horizontal axis in our example) you need either JavaScript, broken semantics or subgrid. This is -- as I understand it -- raison d'etre of CSS Grid Level 2.
- 7y ago
- oh_sigh 7y agoGrid seems so natural. Why did it take 25+ years of css standards to get to it? Is it only natural in retrospect, having slogged through all the troubles of other css layout systems? Was there some long running bias against table-like things that prevented people from seeing the way?
- tannhaeuser 7y agoAm I alone in thinking that the way we're doing brochures as layering multiple complicated ad-hoc layout constraint languages on top of a markup language that itself hasn't much changed in 20 years is absurd? What is really gained by such a powerful, yet highly idiosyncratic construct that not only can insert and/or delete content elements, but also rearrange the order in which they were specified in the input document in the first place, weighed against the complexity this brings to authors and implementers? Is the HTML+CSS stack victim of self-imposed, arbitrary principles of separation of structure and presentation? I can see the practical use of grids and subgrids etc., but who really authors an HTML document with the expectation that it should render as a traditional hierarchical and flow-based layout, and a grid-based layout at the same time? Translated to the domain of programming languages, CSS is to HTML what eg. ten times the amount of LOCs of annotations are to regular Java code. Why not just use a responsive table layout based on revised HTML tables when, clearly, the author's intent is to layout page elements in a tabular fashion?
- hdfbdtbcdg 7y agoWe often have a different order in desktop and mobile 'versions' of the responsive HTML site.
- tannhaeuser 7y agoYes, I know that, and am doing it, too, on my sites. Still, squeezing everything into a single HTML page, then applying CSS (and JS) fu to arbitrarily rearrange, add and drop content doesn't seem rational when website design processes draw upfront desktop, mobile, etc. breakpoints and sketches. Rather, CSS complexity seems a manifestation of organizational boundaries (eg. W3C specifying CSS and WHATWG specifying HTML) to me. Or even a post facto rationalization of the road not taken with HTML. Eg. almost all responsive designs used today can be achieved much more easily using adaptive techniques where there is a device/breakpoint-specific page layout for desktop, mobile, and maybe tablet, resp., with the page template documents pulling in content wherever it fits. It's just that HTML lacks mechanisms for page composition such as SGML's and XML's entity references. Arguably, responsive grids are not only more complex than needed, they're also inefficient wrt. network utilization, as every device has to receive every bit of content, just to hide it away when it doesn't fit the layout. Of course, large sites use JavaScript and visibility events to pull content on-demand anyway. I'm not pissing on W3C's (fantasai et al) work here. CSS is very much a work in progress as we all discover new UI idioms for digital media, and I'm a sucker for it. I just think CSS grids and flexbox is bordering on intellectual brain wankery, when the solution could be achieved much, much simpler, and in a way that doesn't send newbies into a world of cluelessness, doesn't question our ability to consume our own digital media in the future due to over-complexity, and retains the qualities of the web as a medium for simple self-publishing even for a layman.
- tomcooks 7y agoAm i the only one who still uses good old floats and position? Supported everywhere, keeps markup to the bare minimum and doesn't smell like 1992 <table> based layouts.
- SquareWheel 7y agoI still use them plenty, but more for specific situations rather than major layout decisions. Both have their warts however. Float can have undesirable behaviour regarding document flow and clearing afterwards. I try to use it just for floating things inside of text. Position is just a bit illogical, really. Especially when playing with absolute. It puts you at the mercy of any parent element that just happens to be position:relative. I try to stay in the document flow whenever possible. I like flexbox a lot. My biggest complaint is simply that it has a ton of rules and have to frequently look them up. It's a lot nicer to work in for 1D interfaces though. Especially in the age of responsive design. I haven't had a chance to really dive into grid yet, but from what I've read it looks really useful for 2D layouts. It means not having to rely on the various column-based CSS frameworks for more complex sites. This will probably be my go-to in the future for main site layouts.
- _the_inflator 7y agoNope, you are doing good. I did floats and positioning for over 10 years and still like it. In my opinion however Flexbox and Grid have a decent advantage when it comes to responsive/fluid layouts. Grid and Flexbox scale by design while floats and position feel static.
- kibwen 7y ago> and doesn't smell like 1992 <table> based layouts. Word of advice: don't even think about viewing the source on this very page. :P