CSS Grid – New Web Layout Hotness

Very few web developers noticed CSS when it was released in late 1996.  There were very few web developers in total in 1996. Twenty Two years later CSS is not only still around, but it has evolved to become one of the most important Internet standards.

Believe it or not a lot of early websites were laid out in HTML tables.  Yep, as in if you wanted something at the bottom of the page on the right-hand side it would be in the last tr td in the table.

By the year 2000, I had personally begun using stylesheets in my nascent web projects; although mostly for text or “box” styling.  A couple years later I adopted CSS positioning and used cascading style sheets for layout in my embrace of the semantic web.

What is CSS

CSS stands for Cascading Style Sheets.  HTML is the basic markup language for web pages and CSS is used for “describing the presentation” of HTML documents.  

The basic idea is that it is advantageous to separate presentation from content.   By keeping the content in the source document and describing it with CSS you:

  • Expand accessibility to the content
  • Improve the flexibility of the presentation
  • Achieve better control of the presentation
  • Reduce repetition in the source document
  • Present the same source styled differently

So the style in “style sheets” is for the styling of the source (HTML) document.  What’s with that cascading part?

Cascading refers to the way that CSS documents predictably determine which style rule applies if more than one rule matches a source document’s div, span, etc.  

CSS Grid – The Latest Hotness

These days most websites are laid out with some type of a grid and the newest way that web developers are laying out web pages is with CSS Grid.  

With CSS Grid  developers can create complex responsive web design layouts more simply and consistently across browsers.  While the end result is superior and the technology is better, conceptually CSS Grid not much different than the HTML table layout. 

If you want something at the bottom right-hand side of the page it goes in the last grid-area…

The “holy grail” of web page layout

At some point, someone coined the phrase “The holy grail” of web page layout.  What they were trying to describe was a web page layout that has multiple, equal-height columns, a header and footer that “stick” to the top and bottom respectively, all defined by a CSS Stylesheet.

While there were many attempts and implementations, traditional methods of laying out HTML pages to achieve the holy grail layout pattern were difficult.  Certainly, none were nearly as simple or as elegant as this CSS Grid version of the holy grail layout I created for this post. You can view the web page from this code here.

The trick to this layout is in the body tag of the html:

<body class=”container”>

This container class gets a “flexible” layout on smaller screens and and is laid out like this on bigger screens:

display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;

The gid-template-columns class says: we want left and right columns of 200 px width using all the space in-between as a middle column.

If you have some experience with CSS but CSS Grid is new to you, one thing that you want to get up to speed on is the “fr” unit.  The fr unit represents a fraction of the leftover space of a grid container.

The key part of that is the leftover part.

As a further example, let’s say that we wanted to create a column that is 333 pixels wide followed by 3 more columns that used the rest of the space?  We could call do that with CSS Grid with something like:

display: grid;
grid-template-columns:333px repeat( 3, 1fr );

Cool, no? Going back to our “Holy Grail” code, you may have noticed:

header {grid-column: span 3;}

That little slice of CSS goodness means that we want the header to span 3 columns of our grid – so, in this case, all the way across the page.

  The menu works the same way, but notice this is only implemented on the desktop, it displays in more of an “on top of each other” manner on mobile as one would expect.

After the menu comes the three columns.  In the example code the divs are nav (left column) , main (center column) , and aside (the right column). 

The 3 columns work because of the container class and the grid-template-columns: 200px 1fr 200px; we talked about previously.  The left and right columns are 200 pixels wide each. The center column is fluid – that is it is whatever is left over, width wise after the 400 pixels used by the left and right hand side columns.

Like the header, the footer gets a grid-column: span 3 so that it spans all the way across. Notice on the main container class:

.container {display: flex; flex-direction: column; min-height: 100vh;}

The vh in 100vh stands for Viewport Height which is s percentage of the full viewport height. 100vh resolves to 100% of the current viewport height. 

We want our container to fill the screen vertically.

As of now Chrome, Firefox, Safari and Edge all support CSS grid.  IE does have some support of CSS Grid but like with most things IE it’s a mess.    

One of the best parts of CSS Grid is the way it works on mobile.  Responsiveness is built in – if you build a CSS Grid correctly it will degrade nicely.   All the modern mobile browsers fully support CSS Grid.

Expect to see CSS Grid layouts more and more often as dev’s catch on to CSS Grids power and simplicity. You can see a gallery I created with CSS Grid Here.

Are you experimenting with CSS Grid? Have you created a framework with CSS Grid? Feel free to post your links in the comments.

Leave a comment

Your email address will not be published. Required fields are marked *