Rumyra's Head

So I had a chance recently to play around with the CSS Grid Layout Module. It has up until recently only been supported by IE (I know, don't worry I felt a bit weird typing that). I personally don't have a very accessible way to develop in IE, so was pleased to discover it is now supported by Chrome if you enabled the 'Experimental Web Platform' flag.

The best resource for using it in Chrome is Rachel Andrews' post here (Thanks @justinavery). She did write another great one for 24 Ways, however as it was only supported by IE at the time, it uses IE syntax which is slightly different to the syntax Chrome uses and thus confused me to start with. Similarly with the CSS Tricks post here, which is also good, but if you are using Chrome can be confusing.

Some things to share

I discovered I don't need vendor prefixes, I was originally using -webkit-, once I removed this I had that 'Yes' moment when I refreshed my page.

The initial setting up of your grid seemed pretty straight forward. Declare your display type to be grid on the container and then specify your columns and rows via their sizes (Rachel's article above explains this much better than me 😃 ).

.container {
  display: grid;
  grid-template-columns:200px 200px 200px 200px 200px 200px 200px 200px;/*8 columns*/
  grid-template-rows:200px 200px 200px 200px;/*4 rows*/
}

You can of course use the shorthand syntax here (as it's explained in other posts so I originally didn't mention it here, thanks for the nudge @stopsatgreen).

.container {
  display: grid;
  grid-template-columns:repeat(8, 200px);/*repeats 8 200px columns*/
  grid-template-rows:repeat(4, 200px);/*repeats 4 200px rows*/
}

The design I was working with is laid out like a simplified periodic table, with images in specific cells. I wanted to mark it up so I could change the position of these images easily and play around with the design. It would have also been a bonus to make it easy for anyone else who came to look at the code do the same thing.

I had 4 rows and 8 columns worth of cells. To start I positioned each of the images into their appropriate cells by using the grid-row and grid-column properties:

img:nth-of-type(1) {
  grid-row:1;
  grid-column:1;
}

Then I thought it maybe easier to specify names for my grid cells. I like the idea of letters across for each of my columns and numbers for each of my rows. To do this I needed to specify them on the containing element. I realised quite quickly numerical characters didn't work.

When you declare the name of the cell on the element with grid-area this is actually shorthand for grid-row-start grid-column-start grid-row-end & grid-column-end and if you use a numerical character you would need to declare it with quotes:

img:nth-of-type(1) {
  grid-area:'1A';
}

Thus rendering Chrome to think you're only declaring grid-column-start. You could of course do something like this:

img:nth-of-type(1) {
  grid-area:'1A'/'1A'/'1A'/'1A';
}

N.B. My initial thoughts were this may just be a Chrome implementation quirk, something confirmed by a tweet from @tabatkins. I will keep my eye on it and update here if it changes. Another thing to mention is strings are not in the syntax anymore.

But by this point I may as well have just stuck with grid-row and grid-column. (Again check our Rachel Andrews article as she recommends naming lines not cells).

I settled on trying this out:

.container {
  grid-template-areas:"oneA oneB oneC oneD oneE oneF oneG oneH"
  "twoA twoB twoC twoD twoE twoF twoG twoH"
  "threeA threeB threeC threeD threeE threeF threeG threeH"
  "fourA fourB fourC fourD fourE fourF fourG fourH"
}

img:nth-of-type(1) {
  grid-area:oneA;
}

You need to specify a name (string) or '.' (which signifies put nothing in here) for every cell you've declared with sizing. Leaving one or more out will cause things not to render properly. (Probably worth noting this 'put nothing here' space can be taken up with overlapping content - another feature of grid layouts which I'm not going to go into here.)

So…

I haven't tried this naming method out with my devs yet, I may refer back to grid-row and grid-column. The naming has become more of a chance to get to know Grid Layout, it'll be interesting to see what my colleagues prefer.

I wonder if my use case is an edge case and actually most peeps will start using grid layout for their main page structure and grid systems. Something about the way I've used it wants me to have default values for cells tho. For some reason I like the idea of '1A' or '5G'… I could of course be the only one.

One last thing is: I am glad I chose the Grid Layout for this specific design, (I'll post it when it's ready for release), as I do think it works perfectly for what I needed it for. It was a more precise layout than something I would choose Flexbox for. I am also very interested to see how others implement Grid Layout. Tweet me if you have a chance to use it :).