This is a walk-through article by one of ClinkIT Solutions’ software developers providing an introduction and step-by-step guide in using CSS Grid for a basic webpage layout.
A typical webpage has numerous elements such as text, links, images, etc. So how do we arrange all these parts? If we simply place these elements in HTML, it will look something like this:
It doesn’t look like a webpage, and looks more like a document. The elements are just laid out from top to bottom. One technique to design a webpage is by using CSS Grid Layout. CSS Grid is a two-dimensional layout, which means using rows and columns in creating the webpage. Imagine organizing your page like a table and the elements are the cells.
In this article, we will discuss the basics of CSS Grid and how we can use it to design and arrange the content of our webpage.
Let’s Start…
We begin by buidling a sample structure in HTML. In the code below, we have a parent
tag with a class of wrapper containing 5
tags which we’ll identify as items. I’ve added colors so we can identify them visually. On the right side of the screenshot below is what it looks like without the grid.
Now, let’s move to CSS. For the wrapper class, we set the display property to grid so that the element will behave as a grid container. Then, we need define the columns and rows. We use grid-template-columns and set it with a list of values to define the width of the items and how many there will be per row. The example below shows 3 columns with the width of 100px. Only 3 items are in the first row and the excess will be on the next, still following the set width.
We can set different width for each column, shown in the next example.
If we want the items to occupy the whole row, we can use a fractional unit or percentage instead of fixed pixels.
We already have the columns. Now, let’s work on the rows. We can use the same concept for defining the rows by setting it to the property grid-template-rows.
If we want spaces between the elements, we can use grid-gap for even spacing. But if we want different spaces horizontally or vertically, we can use grid-column-gap and grid-row-gap.
If we want an item to stretch the whole row or columns, we can use span in the grid-row or grid-column property of the said item.
A Different Approach
We now know how to define the grid and its rows and columns which we set using units and numbers. Another way to define the grid is with the use of grid-template-areas. Instead of setting the width and height of the items, we name those items and set a template on where to place them. For the next example, we will follow the table template below.
We first assign a name to the elements and set it to grid-area. Then we reference those names in the grid-template-areas. We set a list of string values which represent each row, and in each string we define the items that will be included in the row.
Going Back…
Now that we have knowledge of CSS Grid, then we can apply these to the very first example in this article. Let’s look at the codes below.
First, group the elements in HTML. The top shows the title of the article. A small sidebar on the left is a good placement for links, the rest of the area is for the article content. The bottom shows the footer for any additional details we want to include. Then assign the names to the elements and set a grid template and add a few styles in CSS. The result will be:
There are a lot of ways to use CSS Grid. It can be used to design a blog or a portfolio. It can even be used to build a responsive website without the need of any framework. You just learned the basics and now you have the tool to build and design your webpages.
Get the latest insights on developer best practices, technologies, and solutions for businesses here. Need help with application development or other development services? Schedule a free consultation with us.
