Imagine that we have flexbox as a technique for creating grid layouts, but its design is meant for simpler, one-dimensional layouts; it doesn't work so well if the layout is complicated! Is there an answer, something better, that is designed for the job?
Fortunately there is; I am of course referring to a relatively new technology, named CSS Grid Layout. Support for this is minimal for now, but this is likely to change. In a nutshell, it provides a simpler way to create grids in a browser, without the plethora of options we saw with flexbox.
The downside of using CSS Grid Layout as a technology is that support for it has yet to hit mainstream; it is supported in IE11/Edge, but only under the -ms- prefix. Opera, Firefox, and Chrome offer support, but all require a flag to be enabled to view the results:
Source: CanIUse.com
Leaving aside the concerns about support for a moment, it is easy to see why CSS Grid Layout will take off as a technique. The whole concept has been designed to simplify how we reference cells, rows, and columns; if we compare with flexbox, it is more straightforward to apply styles using CSS Grid Layout than with flexbox.
Note
If you would like to learn more about CSS Grid Layout, then have a look online. This article by Chris House explains it well: http://bit.ly/2bMGlDp.
To see how it compares, let's dive in and build a simple demo to illustrate some images in a grid layout.
For our next demo, we're going to make use of an example created by the developer Rachel Andrew, at http://codepen.io/rachelandrew/full/LGpONE/; we'll be replacing the images with ones from Flickr, depicting pictures of my favorite European town, Bruges. No, it's not to do with the lace, before you ask: good food, fine wine, great atmosphere, stunning chocolates for sale...what more could you ask for, I wonder?
But I digress. Before we get into creating our code, there are a couple of points we must bear in mind:
- This demo is cutting edge, it won't work in all browsers, and for some, it requires enabling support within the browser. Take care, it is perfectly okay to enable the flag, but make sure you get the right one:
- We have to restart Google Chrome in step 1, so make sure you only have the flags page displayed at the start of the demo.
Without further ado, let's make a start on our demo:
- We'll begin by enabling support in Google Chrome for CSS Grid Layout. To do so, browse to
chrome://flagsand search for Experimental Web Platform features. Click on the enable button to activate it, then hit the blue Relaunch Now button at the bottom of the page to relaunch Google Chrome. - With support enabled, go ahead and extract a copy of
gridtemplate.htmlfrom the code download that accompanies this book; save it to the root of our project area. - In a new text file, add the following styles. We'll go through them in blocks, beginning with some initial styling for our images and labels:
body { font-family: helvetica neue, sans-serif; } img { max-width: 100%; border-radius: 10px; } - Next up comes the rules needed to set our container; note that the only style used that relates to our grid is
box-sizing, which we set toborder-box:.wrapper { list-style: none; margin: 0; padding: 0; } .wrapper li { box-sizing: border-box; padding: 1em; min-width: 1%; } - The real magic starts to happen in a set of media queries; we begin with assigning wrapper as our grid container, then set the column and row layout of our grid:
@media screen and (min-width: 500px) { .wrapper { display: grid; grid-template-columns: 1fr 1fr; } .wrapper li:nth-child(1) { grid-column: 1 / 3; } } - In our second query, we set individual styles for our grid wrapper and list items, this time for 640px or greater:
@media screen and (min-width: 640px) { .wrapper { grid-template-columns: 1fr 1fr 1fr; } .wrapper li:nth-child(1) { grid-column: 2; grid-row: 1 / 3; } .wrapper li:nth-child(2) { grid-column: 3; grid-row: 2; } .wrapper li:nth-child(3) { grid-column: 1; grid-row: 1; } .wrapper li:nth-child(4) { grid-column: 3; grid-row: 1; } .wrapper li:nth-child(5) { grid-column: 1; grid-row: 2; } } - Save the file as
gridtemplate.css, within thecsssubfolder of our project area. - Try previewing the results in a browser; if all is well, we should see results similar to this screenshot:
Okay, granted. It's probably not what you might expect in terms of styling, but this demo isn't about making it look pretty, but the basic grid effect. There are nonetheless some important concepts that are good to understand, so let's dive in and explore what took place in our demo in more detail.
Earlier in this chapter, we explored how flexbox can be used to create a grid layout; if we were to compare CSS styling, it is easy to see that on balance, we need to provide more styling when using flexbox than using CSS Grid Layout.
The only styling attribute that we've used in our core styles is box-sizing, which we set to border-box. Nothing else has been used at this point—all of our CSS Grid Layout styles have been set within two media queries.
Our first media query sets the .wrapper class as our grid container. Note that we've only need to set it once, as it will cascade through to larger viewports that are 500px or greater in size.
Once the grid container is assigned, we then specify the grid columns for our template - the 1fr value assigned represents the fraction of free white space in the grid around each cell's content (hence the fr unit). We then finish up by specifying grid-row or grid-column in both media queries - these values define a grid item's location within the grid; these two terms are shorthand for grid-row-start, grid-row-end, grid-column-start and grid-column-end respectively.
Note
For a more detailed explanation of how these terms are used in creating grids, refer to the Mozilla Developer Network articles available at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.