Playing with CSS Grid Layout
I had the chance to see Jen Simmons present at the General Assembly in NYC. The workshop was titled How CSS Grid is Reinventing Webpage Design but it was much more than that. Jen did an amazing job at setting the stage for CSS. She talked about how we got to where we are today and why CSS grid came into existence. It was also super awesome to have Elika Etemad there who is one of the main authors of CSS Grid Layout.
CSS Grid came out of the need to reduce the complexity of designing the layout of a web page. Sure, you can probably create any layout for your site using tables, floats and more recently Flexbox but those tools were not intended to be used that way. Flexbox was designed for efficient space distribution of elements across one direction of the page. People have embraced its efficiency and figured out ways to use it for their page layout because there was no better solution available. Well as of March 28, 2017 CSS Grid is fully supported by Firefox, Chrome, Safari (iOS as well), and Opera. It won’t be long until it is supported by every browser with the exception of Internet Explorer. More on that later.
Intro to CSS Grid Layout
While learning more about CSS Grid, I thought it would be fun to create a tool to easily explore how different grid properties affect the overall grid layout. I named it appropriately as CSS Grid Playground 🙂.
Brace yourself, the gifs are coming…
CSS Grids behave similar to Flexbox in that there is a Parent-Child relationship like so:
So the first step we need to do is define the property display:grid; on our parent element.
Nothing happened. That’s okay because we’re not done yet. What did happen was that behind the scenes our parent div is now a Grid Container which means that all of its direct children are Grid Items.
Next let’s define a 3 column grid with grid-template-columns: 1fr 1fr 1fr; .
Now we see something happening. It looks like our colorful block shrunk but it’s hard to tell exactly how it got divided. Adding a grid-gap: 5px; will make the divisions more prominent.
Ok, so now we see that we have a collection of 7 div elements that are evenly divided into 3 columns. You can think of the 1fr as a fractional unit. By defining all 3 columns as 1fr , the browser will evenly distribute the space between all columns. Let’s see what result we get with 1fr 2fr 1fr .
Now, the second column is twice as long as the first and last column. Using fr units makes it really easy to define your grid dimensions.
Alright, so we’re getting closer to something usable. Let’s make the top row be as wide as possible. It can be used to hold a top navigational menu for example. To do this we want to add grid-column: 1 / 4; to the first grid item.
The 1 / 4 may look cryptic but lets break it down. The first number is the starting position and the second number is the ending position. The positions are the Grid Lines associated with your grid. In this example, our grid has four grid lines going from left to right. So what we’re saying here is that we want our grid item to start at grid line one and end at grid line four.
Next let’s make a left sidebar thats 300pxtall. We also want it to take up positions 2 / 3 vertically. We can do this with grid-row: 2 / 4 .
Next let’s make the content area span 2 grid lines down and 1 grid line right.
Notice how we used the keyword span in this example. What we are saying with grid-column: 2 / span 1; is, start at grid line 2, and span only 1 grid line over. In the previous step we specifically indicated the start / end grid lines.
Next let’s make a footer that also spans horizontally across the entire grid. At the same time, let’s remove 2 grid items while we’re at it. We don’t need them anymore.
Let’s take care of the last grid item by aligning it towards the bottom.
To align the grid item to the bottom we used align-self: end; . The other options you have here are start , center , and stretch which was the default behavior if no specific height was given.
Ok, so here we have a relatively common layout and it was really easy to set up. Just for fun, let’s give the content body a height and width, and center it vertically and horizontally.
Here we used justify-self: center; to horizontally center the grid item.
There is a lot more to CSS Grid than covered here. For more detailed examples, I highly encourage Jen Simmons article on Learning CSS Grid. There she outlines a wide ranges of resources on learning more about CSS Grid Layout.
Internet Explorer Support
Believe it or not, the original spec for CSS Grids was implemented as far back as IE 10. Many new features have been added to the spec since then however Microsoft has no plans to update the Grid implementation in IE 10 and IE 11. What this means is that if majority of your users are on these browsers, ie. enterprise intranet, then you should carefully consider which CSS Grid features you include in your design. For guidelines on creating Grid Layouts in IE 10 and IE 11, check these Microsoft docs out.
Lastly, Edge is one of the browsers that still does not support the latest CSS Grids spec so I encourage you to make it a priority for Microsoft.
If you found this useful, recommend it by clicking the 💚 so that others may find it as well.
Thanks ✌️
