CSS has rapidly evolved over the last few years with technologies and frameworks such as SASS/SCSS and Bootstrap leading the way. Another major advancement to CSS recently within the last year or so is the new layout techniques using grid (Or CSS Grid as it is commonly referred to). This article will explore the basics of CSS grid and how it can help you to design and code a complex layout for various devices.

THE EVOLUTION OF CSS

When table layout was king (yes, that was the web’s dark ages), CSS was mainly used to decorate table cells with text and images. Advancements over time lead to CSS innovation for layout flexibility such as floats and absolute positioning. They were indeed an improvement over table-based layouts, but those were less than ideal to code and could not perform as expected when testing on the various browsers.

CSS has changed quite a bit since those days evolving into a more fluid grid with frameworks such as Bootstrap and Foundation leading the way to grid layouts which respond to various device widths for desktop, tablet, and mobile. CSS Grid Layout is a potential game-changer in that this framework provides two-dimensional layout without using floats, tables, the need for bloated HTML and CSS Grid can even act as the Batman to Flexbox’s Robin—meaning they team well together.

HOW TO USE CSS GRID

Instantiating CSS Grid Layout is easy and it’s similar to instantiating CSS Flexbox. In your CSS simply type:

image of CSS grid layout

If you want to create a three column grid in with this framework, you could add fractions of the free space available as follows:

image of grid template columns

You don’t have to use fractions though. You can also use pixels, ems/rems or percentages. To add spacing between columns you would simply add a grid gap width, like this:

image of grid gap

Fractions are the way to go for a more responsive layout. A shortcut to declare columns in fractions look like this:

image of adding fractions for a more responsive layout

This will give you a 12 column grid similar to the 12 columns in Bootstrap. You can also create rows in addition to columns and that is done like this in the CSS.

image of grid template rows

Another similarity between CSS grid and Flexbox is aligning items. The default is align-items stretch, but you can also align items to start or end. You can span grid items over a container as follows:

image of CSS grid and flexbox

Another way to layout the different blocks such as header, menu, content, and footer is by declaring grid columns.

image of declaring grid columns

Here is an example of the output of the above CSS Grid code:

image of the outpu from the above CSS grid code

GRID TEMPLATE AREAS

Yet another interesting and powerful layout feature in CSS Grid layout is grid template areas. Here is how that is structured in your CSS:

HTML

image of html

CSS

image of CSS grid layout image of CSS grid layout

This gives you the following layout.

image of the output from the above HTML and CSS

To break it down, with grid template areas you assign a grid area in CSS such as header, side footer, main and declare that in CSS, then in your main grid class (.grid in this instance) you list out where you want these areas to display. In the example above you are indicating you want head two display for two columns then, with the (.) you are indicating you want a blank column space and the side in the fourth column. For the footer, you are indicating you want that to expand all four columns.

CONCLUSION

While CSS Grid is still in its infancy, it’s clear that CSS Grid is a very powerful and useful tool in web layouts and should grow in popularity as more and more developers use it for exciting and groundbreaking digital layouts.

Upwork is a freelancing website where businesses of all sizes can find talented independent professionals across multiple disciplines and categories. If you’re a business and are looking to get projects done, consider signing up!