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:
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.
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:
Without further ado, let's make a start on our demo:
chrome://flags
and 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.gridtemplate.html
from the code download that accompanies this book; save it to the root of our project area.body { font-family: helvetica neue, sans-serif; } img { max-width: 100%; border-radius: 10px; }
box-sizing
, which we set to border-box
:.wrapper { list-style: none; margin: 0; padding: 0; } .wrapper li { box-sizing: border-box; padding: 1em; min-width: 1%; }
@media screen and (min-width: 500px) { .wrapper { display: grid; grid-template-columns: 1fr 1fr; } .wrapper li:nth-child(1) { grid-column: 1 / 3; } }
@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; } }
gridtemplate.css
, within the css
subfolder of our project area.
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.
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.