CSS Grid Level 2 – subgrid is coming to Firefox

https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/

by headalgorithm • 7 years ago

368 114 7 years ago

hacks.mozilla.org

theklr• 7 years ago

Once 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.

duxup4• 7 years ago

I 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• 7 years ago

Yes 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.

castis2• 7 years ago

Oh 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.

tlrobinson• 7 years ago

I 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

It does mention subgrid too.

netwanderer3• 7 years ago

Though 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.

Vanderson13• 7 years ago

I 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

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap

shawnz2• 7 years ago

Flexbox can't fully replace grid, or vice versa. In particular, this very feature, subgrids, can't be reproduced with flexbox.

nivenhuh• 7 years ago

flexbox works beautifully with grid

rambojazz• 7 years ago

They solve different problems however. They are complementary, not substitutes.

robdachshund2• 7 years ago

Mixing 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.

codedokode4• 7 years ago

Sadly 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.

robdachshund2• 7 years ago

I'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.

Theodores2• 7 years 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?

bobthepanda2• 7 years ago

Safari 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• 7 years ago

They'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• 7 years ago

Safari got grid support within 3 weeks of Chrome, so there’s reason to be optimistic.

Theodores2• 7 years ago

Blink!

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.

runarberg3• 7 years 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

chenster• 7 years ago

Should we really leave such complex logic to CSS? What if you need level 3, 4..?

shawnz2• 7 years ago

"Level 2" doesn't mean you can only nest them 2 deep. It's just a newer version of the specification

couchand• 7 years ago

PSA: 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/

saidajigumi• 7 years ago

Beyond 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• 7 years ago

https://cssgridgarden.com/ is a fantastic site to get more intuitive understanding of `display: grid;`, can't recommend it enough.

Anonymous4C54D6• 7 years ago

Oh...oh...the numbering is 1 based. O_o

rhizome2• 7 years ago

I'm at the point where I don't want to hear about anything that involves (or implies) a vendor prefix.

maddyboo• 7 years ago

Vendor 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.

rhizome2• 7 years ago

You know what I mean, it's why I included "implies."

temp129038• 7 years ago

I 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• 7 years ago

Use 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• 7 years ago

Flexbox is easier, but I think grid produces better results

antoniuschan99• 7 years ago

Flexbox 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• 7 years ago

I 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.

runarberg3• 7 years ago

If 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.

myfonj2• 7 years ago

I 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• 7 years ago

Absolutely! 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!

GordonS2• 7 years ago

To 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...

myfonj2• 7 years ago

For 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.

oh_sigh• 7 years ago

Grid 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?

superkuh• 7 years ago

It took a long time for tables to be forgotten. Once that happened it was only natural they'd be reinvented in contemporary style.

rimliu2• 7 years ago

Grid is nothing like tables.

goto112• 7 years ago

CSS have supported tables (via display:table) since CSS 2.0. CSS grid is much more powerful than tables though.

tannhaeuser4• 7 years ago

Am 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• 7 years ago

We often have a different order in desktop and mobile 'versions' of the responsive HTML site.

tannhaeuser4• 7 years ago

Yes, 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.

yoz-y• 7 years ago

The main idea, I think is still to keep the data and representation separate, which is advantageous for accessibility, computer representability and alternate representations (text mode browsers). We're kind of halfway there but there is still a lot of layout going on in the HTML "because we can"

stupidcar• 7 years ago

Arguments like this are basically a huge "fuck you" to anybody with internationalisation and accessibility needs.

Yes, if all you care about are able-bodied Western users consuming content on standard devices, then you can get away with just baking your style / layout into the markup like your someone hacking away back in the 90s. The moment you need to move beyond that, you'll start to introduce methods for abstracting style and layout that, eventually, will lead you to reinventing something pretty similar to CSS.

dsego• 7 years ago

Why do you think a different way would be less accessible or couldn't be made accessible by engines that parse the new markup?

tannhaeuser4• 7 years ago

Even if you acknowledge a separation of content/structure and presentation, the layering of new ad-hoc languages (CSS) eg. a different syntactic construct, onto markup does not follow from that premise at all. Markup attributes were introduced exactly for the purpose of holding rendering properties, eg. everything that isn't directly presented to the viewer. The ideal of "semantic markup" was only proposed once CSS was established, as a way to rationalize this ad-hoc separation after the fact. Now with CSS we have a million DSLs without type checking, huge cognitive deficits, and every single problem imaginable when a new language is bolted on top of another. All because HTML had to be backward-compatible, and evolution of HTML as a markup language was held back due to unrelated organizational problems. This is not a good outcome when SGML has all the power you want for rigorously developing document formats on a very long timescale.

Edit: Look at the comments in this thread. They're mostly about "how flexbox works" and how to apply particular CSS grid features. Nobody actually authors content with the intent of structure/presentation separation.

_the_inflator2• 7 years ago

Context: Tables were used for static content, then came transparent 1px gif, then JavaScript to create a hover effect for buttons.

Enter CSS.

Today's content is very different. Today complex applications that were 20 years ago bound to the desktop are (re-) created using Web technology.

This seems overkill for some apps like landingpages, however complex apps benefit from CSS that reacts to its context. Otherwise you would be very JavaScript heavy on those layout things and that is pretty much the essence: CSS3/4 pretty much did what JavaScript layout tools did but native.

tannhaeuser4• 7 years ago

Ok, but you still need tons of JavaScript for webapps, and the trend has been to generate inline styles using JavaScript, JSX/React etc. anyway. Not sure introducing the complexity for webapps, with the content-oriented web as collateral damage, was worth it.

kowdermeister• 7 years ago

Am 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?

Probably you are not alone, but I'm sure you've just haven't spent enough time building complex or niche things in the browser. For simple brochure sites, CSS3's full feature set is an overkill. Use cases on the other hand are near infinite and there are thousands of developers out there needing unique combination of CSS solutions that you can't think of.

Rearranging content for example is a great way to reduce server rendering logic: just generate a bunch of <article> elements and the client will know how to display it. Even the user can make choices based on zoom levels what layout they prefer.

Even with JavaScript support it's nice to offload rendering logic to be handled by the browser which renders it directly on the GPU. If you do layout with JS, then there will be a function call doing expensive calculation every 16ms, that not ideal and CSS3 solved it for us in many cases.

tomcooks• 7 years ago

Am 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.

SquareWheel3• 7 years ago

I 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_inflator2• 7 years ago

Nope, 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• 7 years 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

CSS Grid Level 2 – subgrid is coming to Firefox

Related Stories