CSS Grids for responsive websites

CSS Grid is relatively new CSS feature for building layours. It allows developers to use build-in system of two dimensional grid which allows to designer user interfaces in completly different way. It seems that authors of CSS Grid Bert Bos and Håkon Wium Lie have finally heared desperate calls from developers, who have had to resort to various hacks and workarounds for so long. Let's try it out!

CSS Grid is a relatively new CSS modulefeature for building layouts. It allows developers to use built-in system of two dimensional grid which allows to design user interfaces in a completly different way. It seems that the authors of CSS Grid - Bert Bos and Håkon Wium Lie, have finally heard desperate calls from developers, who had to resort to various hacks and workarounds for so long. Let's try it out!

I personally prefer to "learn by doing" so let's try CSS Grid by building simple responsive web layout. For playing with the code I recommend to use Google Chrome or Mozilla Firefox, because their dev-tools allow you to visualize the grid and the names of its areas.

See code sample in my GitHub repo.

HTML of our sample project will consist of grid-container and five grid-item's. By adding CSS attribute

	display: grid;
 

to CSS selector .container the div element will become the grid container. All of its child elements will become grid items. Grid items will divide the page into regions where you can define rules according to their size and position in the grid.

Next, we will define structure of the grid by defining how many columns and rows we want and also their size. Using grid-template-columns CSS attribute we define columns using a list of size units (px, rem, em, % and fr). We separate each column size by space. CSS grids allows us to use new size unit called fractional unit or fr. The fr unit defines the size as a fraction of empty space left to divide in container.

Our grid-container will consist of 3 columns. The first and the last column will have the width adjusted to their contents, but maximum of 200px. The middle column will extend the remaining space inside the grid-container. We can define the row sizes the same way.

CSS attribute grid-template-areas allows us to name each cell in the grid. Those names are later used in grid-area to assign each grid-item. They will take the space inside the grid which belongs to them.

Now we can use media queries to change structure of the grid-template to make the grid responsive to different page sizes. At the first break point at 800px we will change the original 3-column layout to 2-column layout. Using grid-template-areas we can simply reorganize the website content to match the current grid layout.

When reorganizing the website content for mobile screens we repeat the same steps. Content will be laid out into 1 column and 5 rows.

Finally, we set the grid-container grid-gap: 15px, which separates the individual grid-items from each other. After this step, our simple responsive layout is complete.

We got acquainted with the basics of CSS Grid, we tried some new features that can make our work easier. However, we did not cover everything that CSS Grid allows us to do.

Here are a few resources that have worked very well for me:

Related posts

Do you want find out how can we help your business?