Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Subgrids Considered Essential

Grid layout is a pretty darned fantastic thing.  I’ve been digging into it as I write the grid layout chapter of CSS:TDG4e, and there are more things in here than have been dreamt of in our layout philosophies.  One of the things I’ve recently come to realize is the power and necessity of subgrids.

To understand why, let’s explore a use case, which you can see in various forms on this test page.  I cribbed this use case pretty directly from Fantasai, but I’m going to be analyzing it a little differently.  The basis is a form with the various fields and labels in unordered list items, to help with accessibility and to be basically readable and usable if the CSS somehow fails to be applied.  The markup looks like this:

<form method="post" action="script.cgi">
    <li><label for=name>Name:</label>
        <input id=name name=name></li>
    <li><label for=email>Email:</label>
        <input id=email name=email type=email></li>
    <li><label for=tel>Telephone:</label> 
        <input id=tel name=tel type=tel></li>
    <li><label for=url>Homepage:</label>
        <input id=url name=url type=url></li>
    <li><label for=bday>Birthday:</label>
        <input id=bday name=bday type=date></li>

The basic form with no grids.

Ideally, we’d like the form fields to all line up into a column, and the labels to be in another column.  Furthermore, we’d like the label column to be only as wide as the widest label’s element box, and no more; the rest of the grid can be taken up by the input column.

This seems like a case tailor-made for grid layout, but there’s a problem.  Because grid items are only ever the child elements of a grid container, we can’t just apply a grid to the ul element and go from there.  Instead, we have to make each li element a grid container, in order to make each label and input element a grid item.  But that means each list item’s grid affects its children, with no reference to the other list items’ grids.  We can write the template we want, like so:

form ul li {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}

Each list item a grid, but to what end?

That will get us a result almost precisely as if we’d applied no grids at all.  The only difference is that the input elements will all be as wide as their columns, according to the CSS Grid specification.  Chrome fails to do this last bit correctly, whereas Firefox Nightly gets it right, but otherwise the layout is essentially the same.  You can see this in the #form1 example on the test page.  (Remember, you have to have a current grid-supporting browser for the examples to correspond to what I’m talking about here.)

We can get closer to our goal by experimenting with a fixed-width grid column for the labels, figuring out the width of the widest label, and then just making all the label columns be that wide.  That would be written something like this:

form ul li {display: grid;
  grid-template-columns: [start label] 7em [input] 1fr [end];}

Using fixed-width columns to simulate a single column.

That works pretty well so long as none of the labels ever change—if a label is added (or edited) to be wider, it will wrap to multiple lines.  Alternatively, if the longest label is dropped or edited to be shorter, the label column won’t resize down.  It will just stay the same dumb fixed width until someone hand-adjusts it.  And honestly, at that point I may as well be using flexbox, which would do this version of the layout just as well, and would be more widely supported for the near to intermediate future.  At any rate, you can see the grid version of this in the #form2 example on the test page.

But what if we could set a grid on the ul element, and then make all the li elements grids that use their parents’ grid for the layout of their children?  That’s exactly what subgrids do.  This is the solution we’ve been seeking, in basic form:

form ul {display: grid;
  grid-template-columns: [start label] max-content [input] 1fr [end];}
form ul li {display: grid; grid: subgrid; grid-column: start / end;}

Here the list items establish grid containers, thus making the label and input elements into grid items like before, but are stretched across the two columns of the ul while using those very grid lines for laying out their child elements, plus those children influence the placement of their grandparent’s grid lines.  Thus, we can specify things like max-content for the label column size and have it Just Work™.

Or it would Just Work™, except that as I write this, none of the grid implementations have subgrid support.  Authors who want to create the kind of layout we’re after have to compromise in one way or another—either by faking the content-sizing with a fixed-width column, or by stripping down the markup until there’s barely anything left—thus sacrificing accessibility, progressive enhancement, and general best practices, as Fantasai illustrated in her article.

You can probably see a lot of other ways in which subgrids would be useful.  Take defining a full-page grid, the kind with a bunch of regularly repeating grid lines onto which various elements can be attached, like this one or this one.  In this scenario, being able to designate each section of the page a subgrid would let you have all the pieces inside that section participate in, and lay out in relation to, the overall page grid.  Without subgrids, you’d either have to make every element you want to lay out a child of the body element (or whatever you used to create the page grid), or you’d have to recreate segments of the page grid in each nested grid, and give up any hope of columns that can flex with the contents of multiple page sections.  Neither solution is appealing.

This is why I’ve come to the same conclusion other grid experts (like Rachel) already have: subgrids are a major component of grid layout, and should be a part of any grid layout implementation when it emerges from developer-preview status.  If that means delaying the emergence of grids, I think it’s worth it.

I say that because our field has a tendency to glom onto the first iteration of a technology, learn it inside out, hack around its limitations, and then ignore any future improvements unless somehow forced to do so.  If grid layout is released without subgrid support, we’re risking shoving subgrids into the back of the author-practices cupboard for a long time to come.  And along with it, potentially, grids themselves.  The frustration of trying to build layouts without subgrids will quickly become overwhelming for all but the simplest cases, leading authors to try and then discard grids as a serious tool.

First impressions matter.  CSS itself suffered for years from the initial impressions designers formed of “boring, boxy” layouts, and it still suffers from the handicap of being a presentation system without a layout engine at its core.  Grid layout is the first serious candidate to fill that hole in the past two decades, and I don’t want to see them hamstrung from the outset.  Subgrids are essential to the adoption of grids.  I hope they’ll be implemented as soon as possible, and before grids are pushed into public release channels.

A “Year in Review” Review

A year ago today, I went onto Facebook and was shocked by what I saw.  After a few moments, I started thinking through what had happened, and why, and decided to quickly blog about it.  Before a week had gone by, that post had become a news story covered around the world, showing up in newsprint and on web sites, leading to interviews and more.  There was a moment where I was sitting in my office with my daughter when she looked over, took in my expression, and asked me if I was okay.  I couldn’t speak for a minute.  The story had just hit TIME Magazine and the New York Times.  It was a truly surreal experience.

From out of that experience, a lot of things grew.  I realized that “Designing for Crisis” was one piece of a larger topic, started to get a handle on that topic, and teamed up with Sara Wachter-Boettcher to create a book which we just finished writing, title to be announced shortly, and expect to be on shelves within a few months.

In parallel to that, I was asked to talk with the design and content teams at Facebook, which I did in the spring of 2015.  It was an incredibly productive and honest discussion, entirely because the team at Facebook was truly concerned and open to change.  You can see how this has evolved over time in On This Day, whose messaging has become more human and sensitive to the possibility of harm.  And you can especially see it in the 2015 edition of Year in Review.

Year in Review’s timeline ad for 2015.

Whereas last year, the YiR feature was clearly designed around awesome years and happy people, this year’s is a lot more respectful and careful.  It isn’t as dynamic, but when it comes to memories, this seems entirely appropriate.  As Sara and I say in our book, this is “what it looks like when an organization embeds caring into its product, and is willing to own up to mistakes”.

I know the Facebook copy “we care about you and the memories you share” has been derided in some quarters, because people reflexively assume that no company (least of all Facebook) actually cares about you as anything more than a sales unit.  Maybe that’s true of some parts of Facebook—it’s a very large company, after all, with a lot of competing fiefdoms—but the design and content teams were writing from the heart.  They honestly do care about the people who use their products, and they care very much about how their work affects people.  They know they’ll stumble sometimes, but they’re committed to trying anyway and learning from their stumbles.  For that alone, they have my deepest respect.  To forge ahead in front of an audience of well over a billion people takes an incredible amount of courage.

Year in Review will be a part of the talk I’ll be giving in 2016 at An Event Apart, just as it was of Sara’s and my forthcoming book.  In brief, the assessment that you’ll find in both places: Year in Review 2015 is a significant step forward, a great example of compassionate design at scale.  I applaud Facebook for forging a path forward.

The Face of My Daughter

As Rebecca’s Boardwalk wound down, one of our friends came up to me to say goodbye.  “This was just great, such a tribute,” she said.  “I know it must have been a really hard day for you.”

Instead of replying directly, I thanked her for coming, because I didn’t know how to tell her that it hadn’t really been hard at all.  Not in the way she’d meant, anyway.

It was eighteen months ago today that, in the span of half a day, Rebecca turned six and died.  Although I have tried in various ways, there is really no way to express what that was like.  There is no way I have found to convey the feeling of saying goodbye to your child forever, nor of what it takes to tell her it’s okay to go.  Those who understand have done it themselves.  Those who haven’t, don’t, and I hope for their sakes they never do.

In the time since, I’ve devoted a lot of time and attention to grieving.  Just as Kat and I were with Rebecca’s last weeks, and with her cancer treatment, and as we have been with the raising of all our children, and in most of what we do in life, I have been—for lack of a better term—deeply mindful of my grieving.  I don’t mean to link it to the current fad of “mindfulness”, which I know next to nothing about.  I just mean that Kat and I always try to be present for the present, and keenly aware of the future.  Acting locally and thinking globally, temporally speaking.

What I’m really trying to say is that a couple of months ago, more or less, I realized that I had turned a corner.  The agony of immediate grief has passed.  When I think of Rebecca, and even of her death, it is not a knife in my heart and guts.  Sometimes it’s a dull ache, and sometimes it just…is.

And then sometimes, when I think of her, I think of the happy times and smile.  They are memories very much like those I have for Carolyn and Joshua, when I think back to a special day we shared, or a family trip, or a moment of accomplishment.  The sort of wistful, sweet, I remember-when smile that lightly touches the heart.  And if I then remember that there will be no more such moments, it is often felt as a simple fact of life, neutral in many ways.  I have, in a very real sense, accepted it.

I had imagined that I would one day be able to say this—in fact it was always a goal—but I expected it to take years.  I even wonder at times if I truly loved her, to have let go of agonizing grief so soon.  The rest of the time, though, I know that it is my love of her and her mother and her siblings—and more importantly, all their love of me—that has allowed this.

When I do grieve anew, it is usually for my other children, who must grow up without the sister they love so dearly.  But as Kat and I have showed them how to grieve, honestly and without shame or fear, now I hope to show them how to come to terms with it and find a kind of peace.

So yes, in my experience, time does heal wounds.  To heal is not to completely restore; I am not who I was and never will be.  That is always true, of course.  Every day makes each of us into someone new.  I changed irrevocably the day I first got married, and again the day I got divorced.  So too the day I married again, and the day Kat and I decided to become parents, and each time a child came into our lives.  And the day a child left us.

Deep wounds can weaken us, may even threaten our lives…and when they heal, scars remain.  This is the form of closure I have always sought: the stitching of a grievous wound, to let the ragged edges grow back together, slowly closing up to knit new tissue.  The mark is there, and will be until I finally die—but a mark is not an impediment to living.  Our scars are a part of us, and to deny them is to deny a piece of ourselves.  I know, because I tried.  For a time, I forgot the face of my daughter.  I remember it now.

Of course I still miss her, and of course some days are not so graceful as all this might sound.  Some days my throat still tightens with grief until my breath grows short.  There are not many such days, though, and fewer as time goes on.  Bit by bit, day by day, the pain eases and the fondness returns.  My memories of Rebecca are tinged more with affection than sorrow.

As she would want, really.  Her six-year-old ego, selfish in its unselfish way, would have wanted me to be sad that she went away; but her six-year-old spark, so bright and merry, would have wanted me to stop crying.  And sometimes, when I do feel the edge of grief’s blade come close, I can hear her say, as she did whenever she wanted my attention and wasn’t getting it, in her affectionately amused, slightly exasperated, wryly matter-of-fact tone: “Daddy, you’re getting distracted.”

And then I smile.

A Decade Apart

It was ten years ago today that Jeffrey, Jason and I stood up in front of a little over a hundred people in an oversized classroom space in the upper back corner of The Franklin Institute in Philadelphia, PA, and kicked off the very first An Event Apart.

Just the three of us, talking throughout the single day of the event, trading off talks until lunch and then throughout the afternoon.  The slides, most of them running on S5, were projected onto a pull-down Da-Lite screen, and we tapped the screen with our hands to draw attention to bits of design (or code).  In the audience, there was an attendee who’d flown in from Tokyo, just to be there.  Another from London.  We were staggered to think anyone had come more than half an hour’s drive.

It was as lo-fi as it gets without paper megaphones, and we made a whole slew of rookie organizer mistakes—but we got the essentials right, the same essentials we’ve kept alive all these ten years: present in-depth, practical, higher-level content to an audience of savvy web folks, and treat them right.  As we’ve grown over the years from one day to two to three, and from three speakers to twelve (and sometimes eighteen), we’ve kept one central goal in mind: to create a conference we’d gladly pay to attend, every time.  And while I’m admittedly biased, I believe we’ve pretty much succeeded at that goal.

Ten years, which is a lifetime ago and then some, and still rolling strong.  We’re calling it A Decade Apart, because why wouldn’t we?  To celebrate, we’ll be doing some fun stuff at all our events in 2016, special giveaways on top of the usual giveaways, the return of some audience favorites…but I don’t want to give away too much just yet.  Suffice to say, we’re planning on making this our best year ever, and everything’s shaping up to deliver on those plans.

If you’ve been to a past Event Apart, thank you—and if you have a memory to share, I’d really love to hear about it in the comments.  And whether you’ve been or not, I hope to see you in 2016!

In Gratitude

By most measures, I’ve had a pretty damn successful career.  I’m not at “I can retire today” money and nobody’s erecting statues with my visage on them, but only the first of those holds any interest for me, and I’m not expecting it any time soon.  (At current rates of saving and investment return, I should reach that state… right around the traditional age of retirement, actually.)

Of course, I’ve written a bunch of books that earned me some royalties, but books are not a way to become wealthy, unless you’re crazy lucky.  Yes, you have to put in the work to write the book, but in the end, whether your book makes you coffee money or high-end-chrome coffee machine money is down to forces entirely outside your control.  Certainly outside mine.  When I wrote my first CSS book, nobody expected CSS to be more than a slowly dying niche technology.  When I wrote the second, CSS had been declared dead twice over.  When I wrote the third and fourth, it was just starting to revive.

I invested tons of effort and time into understanding CSS, and then to explaining it.  Because I was lucky enough to put that work toward a technology that turned out to be not just successful, but deeply important to the web, the work paid off.  But think of the people who put that same kind of time and effort into understanding and explaining DSSSL.  “Into what, now?” you say.  Exactly.

Similarly, when Jeffrey and I set out to create An Event Apart, there was no assurance that there was a viable market there.  Nearly all the old web conferences had died, and those few that remained were focused on audience very much unlike the one we had in mind.  Luckily for us, the audience existed.  We worked really hard—still work really hard—to find and speak to that audience with the topics and speakers we present, but it would all have come to nothing if not for the sheer luck of having an audience for the kind of show we wanted to create.

For most of my adult life, I’ve been keenly aware of the incredible amount of luck that goes into success, and the awareness only grows as the years pass by.  Just putting in a lot of hard work isn’t enough.  You also have to have the sheer good fortune to have that hard work pay off.  You can sink everything you have, money and soul, into building a place in life, only to have it all sabotaged and swept away by random chance.  You can invest very bit of your life and fortune into an outcome that blind fate renders impossible.

So yes, I worked hard to understand the web, and to explain the web, and to write books and talks, and to create a conference series, and everything else I’ve done over the years—but I was supremely lucky to have that work come to something.  An incredible combination of time and place and interest and birth and a million million other things made that possible.

More to the point, the existence of people interested in what I have to say made that possible.  So I thank you, one and all, for all that and still more.  Thank you for rewarding and redeeming the work I’ve done.  Thank you for being of like mind.  Thank you for your support.  Thank you for listening.  Thank you.

This article was originally published at The Pastry Box Project on 2 December 2015.

Local Ipsum

Throughout 2015, a few people who’ve seen me present “Designing for Crisis” at An Event Apart have noticed that, on the slides where I have filler text, it’s a localized variant.  In Washington, DC, for example, one section started out:

Andrew ellicott lobortis decima thomas jefferson vulputate dynamicus fiant kingman park sollemnes ford’s theater. Vero videntur modo claritatem possim quis quod est noma howard university consequat diam. Blandit ut claram north michigan park seacula judiciary square william jefferson clinton hawthorne millard fillmore iis…

This was a product of some simple PHP I’d originally written to generate Cleveland-themed filler text a year or so back, which you can find at, and which I’d expanded upon to let me generate text for my presentations at AEA.  The name comes from the original idea I had, which was to provide a list of cities/regions/whatever, so that users could pick one and generate some filler text.  That never quite came together.  I had a semi-working version once, but the UI was horrible and the file management was worse and I got discouraged and rolled back to what you see now.

I kept telling myself that I’d get back to it, do the city-selection thing right, polish it nicely, and then finally release the source.  I’ve told myself that all year, as I manually swapped in city information to generate the filler text for each of my talks.  Now I’ve finally admitted to myself that it isn’t going to happen, so: here’s the source.  I chose a pretty permissive license—BSD-ISC, if I recall correctly—so feel free to make use of it for your own filler text.  I’ll be happy to accept pull requests with improvements, but not package-management or complete MVC restructuring.  Sorry.

I know, it’s a goofy little thing and the code is probably pants, but I kinda like it and figure maybe someone out there will too.  If nothing else, we can look for a few laughs in the output and maybe—just maybe—learn a little something about ourselves along the way.

(P.S. Speaking of “Designing for Crisis”, look for a post about that, and more specifically video of it, in the next few weeks.)

Rebecca’s Boardwalk

Yesterday was the inaugural Rebecca’s Boardwalk, a fundraiser in support of Rebecca’s Gift.  About two hundred people joined us for soft pretzels, snow cones, bounce houses, carnival games, face painting, and temporary tattoos.  I saw former co-workers and even a high school classmate there.

Between the ticket sales (both admission and activity) and the money raised in the raffles and the silent auction, Rebecca’s Gift raised enough money to send another family on a healing trip.  None of that would have been possible without a huge community of helpers and volunteers, so many that I could never thank them all.  There are a few I’d like to specially note, however.

First, my wife Kat and our friend Karla, who are the co-founders of Rebecca’s Gift and the people who really put the whole Boardwalk event together.  With help, of course, tons of help—but they were the driving forces.  People often think that Rebecca’s Gift is something I put together, but I didn’t.  It’s all them.  The non-profit wouldn’t exist, and the event wouldn’t have happened, without their drive.

Second, David Leslie Johnson, who contributed signed scripts from The Walking Dead, a signed making-of book from Red Riding Hood, and a signed poster from The Conjuring to the silent auction.  If you’re a horror fan, you might recognize David as the screenwriter of Orphan, as well as his involvement in the upcoming re-reboot of A Nightmare on Elm Street and the sequel to The Conjuring.  He’s also one of my best friends, as he has been since late elementary school.

Third, Tattly, which donated a lot of boardwalk-themed temporary tattoos.  For example, this Ferris Wheel design, and this very appropriately-themed set.  If you’ve never seen Tattly’s tattoos, they’re really something.  Vibrant, detailed, and most of all fun.  If you’re looking for temporary tattoos, check them out first.

Fourth, Anshe Chesed Fairmount Temple, for providing us with the right space for the event, for giving us the support (and storage space!) we needed to pull the whole thing off, and for trusting us with both their facilities and their schedule.

And fifth, again, everyone who donated items and sponsored booths and bought tickets and came to have a good time, just down the hall from the preschool classes where Rebecca wowed everyone with her sparkly dresses and impish grin.  It was an afternoon worthy of her name and her spirit.  Thank you all.

(If you’d like to support the mission of Rebecca’s Gift, please feel free to use the Donations page.  And thank you.)

I’m Probably Wrong

If there’s one thing that’s made it possible for me to learn as much as I have, and create as much as I have, it’s that my default attitude about things, especially technical things, is that I’m probably wrong about them.

When I first took up CSS and it didn’t do what I expected from reading the spec, I started creating simple, focused tests of each property and its values, to figure out what I was getting wrong.  Because I wanted to be sure, I built tests for all the properties, even the ones I was confident about understanding—and, in places, found out my confidence was misplaced.  Eventually, those tests became the CSS1 Test Suite.  Since I had discovered that, in a lot of cases, the browsers were actually wrong, I decided to document CSS support in browsers.  That became the CSS Mastergrid (long since gone).  On the strength of that resource, I started writing articles to explain how things worked, or didn’t, which led to writing my first book.  And so on.

But it all started because I assumed I was wrong about how CSS should work, not that the browsers were fundamentally broken.  Simple test cases seemed like the best way to find out.  One thing led to another.  In a lot of ways, you could say that my career was made possible by me assuming I was wrong, and setting out to determine exactly how wrong I was.

It’s not that I want to be wrong; in fact, I dislike being wrong.  But I dislike continuing to be wrong much more, so I try to find out how I’m wrong, in hopes of becoming less wrong.  It’s not even “strong opinions, weakly held”—it’s more “strong suspicion of error, strongly pursued”.  In public, when necessary.  (This is where it helps to be willing to look like a dork, or even a fool, as Kitt wrote about yesterday.)

When asking for help, this is the approach I take.  When I post to mailing lists or forums, it usually comes out as, “Here’s what I think is so, but results don’t match that understanding.  What am I missing?  Please help me get it right.”

How am I wrong?  Because I’m probably wrong.

This article was originally published at The Pastry Box Project on 2 November 2015.

February 2017