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.
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.
grid-columnproperty of the said item.
A Different ApproachWe 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.
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.
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.
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.