On Mark Boulton’s Grids Proposal

Warning This article was written over six months ago, and may contain outdated information.

I recent­ly wrote a fea­ture for .net Mag­a­zine, The Future of CSS Lay­outs, which took a look at sev­er­al pro­posed CSS mod­ules intend­ed to pro­vide more flex­i­bil­i­ty for lay­ing out web­sites. One of those mod­ules, Grid Lay­out, has been exper­i­men­tal­ly imple­ment­ed in IE10 Plat­form Pre­view, and it prompt­ed Mark Boul­ton to pro­pose an alter­na­tive approach in his arti­cle Rethink­ing CSS Grids.

While I think the alter­na­tive syn­tax is pret­ty robust, I did detect a cou­ple of flaws in it which I promised Mark I would write about, and that’s what I’ll do in this arti­cle. Before I get to that, I just want to quick­ly address one of the key points from his proposal.

Defining a Grid

grids have been around for quite a while and there is estab­lished words for things like Columns, Fields, Mod­ules and Gut­ters. It’s my feel­ing that the CSS grid mod­ule should speak the same lan­guage as design­ers, not that of developers.

I’m not cer­tain that I whole­heart­ed­ly agree with this; not that the Grid Lay­out syn­tax uses terms that are more famil­iar from tables or spread­sheets rather than typo­graph­ic grids, as this is cer­tain­ly true; but the con­tention in the sec­ond sen­tence, that the Grid mod­ule should be aimed at design­ers rather than developers.

The lan­guage of grids may be obvi­ous to those that are trained in using them, but I won­der just how many peo­ple that includes. For the non-typo­graph­i­cal­ly savvy I think it’s not as lit­er­al; speak­ing for myself I find Rows and Cells more log­i­cal than Fields and Modules.

And while Mark’s pro­posed syn­tax works well for typo­graph­ic grids, it does mean that mak­ing an irreg­u­lar grid becomes extreme­ly hard. Using the Grid Lay­out syn­tax you can make reg­u­lar and irreg­u­lar grids very eas­i­ly, where­as this new pro­pos­al is real­ly intend­ed only to make one very strict type of grid.

Any­way, that’s kind of besides the point; I’m not strong­ly con­vinced of my own argu­ment, just thought it was worth rais­ing. But I’ll take Mark’s premise at face val­ue and go along with the syn­tax that he pro­pos­es. If that’s a more log­i­cal way to think about grids, then the syn­tax seems pret­ty sol­id. There are, how­ev­er, a few poten­tial prob­lems I can see with it.

Fractions

The first prob­lem is that bas­ing the grid on mod­ules elim­i­nates the effec­tive­ness of the fr (frac­tion) unit. In the exam­ple in sec­tion 4 of the arti­cle a three col­umn grid is cre­at­ed using this code (NB: I’ve changed some of the val­ues a lit­tle to bring them into line with exist­ing properties):

div {
grid-columns: 3md 1fr 2md;
grid-x-count: 10;
}

As this is on a grid made of 10 hor­i­zon­tal mod­ules, the cen­tral col­umn is five mod­ules wide. But what if we used four columns, with two frac­tion units?

div { grid-columns: 3md 1fr 1fr 2md; }

That would make the sec­ond and third columns 2.5 mod­ules wide. I’m pre­sum­ing that we can’t have frac­tions of mod­ules, so if the frac­tion unit can’t be used to cre­ate frac­tions then it becomes use­less (or, at least, very hard to work with). In this case we should just go back to using the md unit for everything:

div { grid-columns: 3md 5md 2md; }

And if we’re doing it this way, then we don’t need the pro­posed grid-x-count prop­er­ty any more; that count can be obtained by the sum of the md units in grid-columns. This brings it a lit­tle clos­er to the exist­ing Grid Lay­out syntax.

Breaking the Grid

The sec­ond prob­lem is that the grid is now very hard to break out of. What if, after we’ve laid out our grid, we want­ed to put an item that broke into the gutters:

How do I posi­tion that? Unlike in the Grid Lay­out syn­tax, gut­ters aren’t avail­able as slots to posi­tion ele­ments in. I could use rel­a­tive posi­tion­ing to move it into the gut­ter, but how do I also expand the ele­ment so that it’s larg­er than the mod­ules it cov­ers? Maybe with padding:

div {
left: -21px;
padding: 21px;
position: relative;
top: -21px;
}

But if, in this box mod­el, padding is added to make the ele­ment big­ger, then how would I put put inter­nal padding on an ele­ment which I did­n’t want to get big­ger? A pos­si­ble alter­na­tive solu­tion to this would be to add a new prop­er­ty, some­thing like:

grid-gutter-span: all;

This could also have the key­words top, right, bot­tom, left, or none, to pro­vide flex­i­bil­i­ty to the ele­ments that are placed in the grid.

Conclusion

For defin­ing a typo­graph­ic grid I think this syn­tax is pret­ty well thought out, cer­tain­ly for a first draft, and the prob­lems I’ve point­ed out here are not insur­mount­able, but just require some more con­sid­er­a­tion. I hope that the feed­back I’ve giv­en is con­struc­tive — well, most of all I hope that I’ve under­stood the pro­posed syn­tax cor­rect­ly and not made any stu­pid mis­takes! If you’ve any­thing you’d like to add, feel free to leave a comment.

3 comments on
“On Mark Boulton’s Grids Proposal”

  1. I may be mis­un­der­stand­ing the ter­mi­nol­o­gy, but is a ‘typo­graph­ic grid’ the same sort of thing as what’s being specced in the CSS Line Grid mod­ule?

    Rob

  2. @Rob: That seems to describe a base­line grid, for pro­vid­ing ver­ti­cal rhythm. Inter­est­ing find, thanks.

  3. Thanks for the thought­ful response, Peter.

    I’ll try to address some of your questions:

    The lan­guage of grids may be obvi­ous to those that are trained in using them, but I won­der just how many peo­ple that includes. For the non-typo­graph­i­cal­ly savvy I think it’s not as lit­er­al; speak­ing for myself I find Rows and Cells more log­i­cal than Fields and Modules. 

    It’s a ter­mi­nol­o­gy thing. I’d rather that Rows and Cells are reserved exclu­sive­ly to Data tables. Once we start to blur those lines again (and undo the good work the Web Stan­dards move­ment did), we get onto dodgy ground.

    …but the con­tention in the sec­ond sen­tence, that the Grid mod­ule should be aimed at design­ers rather than developers.

    That’s a fair point. Maybe I should clar­i­fy that, of course, the ter­mi­nol­o­gy needs to make sense to every­one, but as this is a *lay­out* mod­ule, there is ter­mi­nol­o­gy that has been used for decades to describe these things. Why rein­vent the wheel?

    And while Mark’s pro­posed syn­tax works well for typo­graph­ic grids, it does mean that mak­ing an irreg­u­lar grid becomes extreme­ly hard. 

    Irreg­u­lar (or Asym­met­ric, as they’re called) grids use two or more mod­ule sizes. I think this would be pos­si­ble by com­bin­ing declared mod­ule sizes with x‑counts and posi­tions. I don’t think it would be difficult.

    Maybe some­thing like:


    div {
    display: grid;
    grid-module-1: 50px 30px, x-count=3;
    grid-module-2: 80px 30px, x-count=2;
    grid-module-3: 50px 30px, x-count=3;
    }

    Using the Grid Lay­out syn­tax you can make reg­u­lar and irreg­u­lar grids very eas­i­ly, where­as this new pro­pos­al is real­ly intend­ed only to make one very strict type of grid. 

    I dis­agree (as I said above). Declar­ing dif­fer­ent mod­ule sizes is how you cre­ate asym­met­ric grids. This pro­pos­al also allows you to cre­ate mod­u­lar grids (as seen in my exam­ple), and colum­nar grids. And base­line grids. The oth­er type of grid that will be tricky are Axi­al grids (which piv­ot around a point in space).

    grid-gutter-span: all;

    Great idea. You may well indeed to hang ele­ments into the gut­ter. How­ev­er, some­times that ‘hang’ is not the width of the gut­ter, but a por­tion of it (for cer­tain glyphs, key­lines, tint­ed box­es etc). So, we’d need to be able to declare a mea­sure­ment of the hang.