
CSS Grid Level 2 – subgrid is coming to Firefox - headalgorithm
https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/
======
theklr
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.

~~~
duxup
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.

~~~
Vanderson
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](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)

~~~
chrisweekly
Wonderful comment, bravo!

I think back to the early days (circa 2000 or so), before CSS positioning and
float hacks were even a thing, working as the lead webdev at Upromise,
meticulously hand-crafting complex layouts with nested HTML tables... you
could nest them 5 or 6 levels deep before running into noticeable render
performance issues in what must have been, what, IE4 and NN4? It really has
been a couple decades, hasn't it. Kinda wish every FE dev had to follow the
path the industry took to get where we are now...

/ramble

~~~
Vanderson
ha, ah the memories. On my first web job (late 90s) my boss interviewed a guy
who was bragging about one pixel borders around an element that were all
background colored table cells. (each had to have an image in them to force
the cell size, remember doing that?) I knew how to do this, but I said it just
wasn't worth doing.

I think this is how web tech works best, when you see the best way coming down
the pipe, don't waste time on hacks. But I admit, floating was the only way to
make columns for far to long.

I know grid is taking a long time to take root. I primarily only use grid-
template-columns, grid-gap and areas or really only needed for
major/complicated layout.

~~~
wolco
Float?

Why not table with inline width=95%/align=center

~~~
Vanderson
Of course back in the day we all used tables, but there was a shift where
"tables=bad" for layout, but we didn't have a good replacement yet... so it
was floats.

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

~~~
GordonS
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...

~~~
myfonj
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.

~~~
GordonS
Well, I'll take your word on it. There's zero chance I'm going to spend the
next 4 years battling with CSS in an attempt to prove otherwise ;)

------
couchand
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/](https://nationalparktypeface.com/)

~~~
saidajigumi
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
[https://cssgridgarden.com/](https://cssgridgarden.com/) is a fantastic site
to get more intuitive understanding of `display: grid;`, can't recommend it
enough.

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

------
oh_sigh
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
It took a long time for tables to be forgotten. Once that happened it was only
natural they'd be reinvented in contemporary style.

~~~
rimliu
Grid is nothing like tables.

~~~
tty2300
The main difference being you can effortlessly rearrange the layout based on
screen size which tables couldn't do.

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

~~~
stupidcar
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.

~~~
tannhaeuser
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.

------
Theodores
'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?

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

~~~
Theodores
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.

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

~~~
runarberg
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.

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

~~~
SquareWheel
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.

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

~~~
maddyboo
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.

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

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

~~~
antoniuschan99
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

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

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

