An Overview of CSS Grid with Example Front-End Codes

CSS Grid has redefined the front-end development and has taken web development to the next level. Let’s go a step ahead from the basics to advanced examples and tweak the front-end HTML elements further with CSS Grid.

What is Grid?

CSS Grid helps in writing quick and efficient layouts using the in-browser grid capabilities. Before the arrival of CSS Grid, you need to devise your custom grid system or go with front-end frameworks such as Bootstrap. Though you can rely on frameworks, CSS Grid makes front-end development even easier while developing simple and complex layouts.

Basic Terminologies

The basic terms associated with CSS Grid are as follows:




Grid Lines


All the above terms are explained in the diagram. This diagram shows a 3×2 column grid, which means 3 columns and 2 rows.

Example Layout

Using the above-discussed concepts, let’s build an example layout as shown below:

In the above layout, there are totally 3 layouts: Header, Footer, and Center Sections. The center section is further divided into 3 columns: Nav in the first column, main content area in the second column and sidebar on the third column.

Here is the sample HTML for this example.

As we’re clear with the HTML markup of our essential elements, let’s start styling the. Since basic styling and layouts differ from each other, you can do the basic styling based on your personal preference.

In the above example, we are styling all the elements inside a wrapper container. Further, we’re setting the background color to #ef592b and it varies depending on the brand preferences. The value of the display property is set to “flex” because we need to set the align-items and justify-content properties to center in order to achieve the desired layout. Also, the bottom and right margin are set to 1px for proper alignment.

Next, let’s get into the CSS Grid part of it.

In the above code, you can see the display property is set to grid and that is how a container is converted into grid. Also note that .wrapper * is different from .wrapper.

As we’ve defined the display property to grid, we can now focus on styling the columns and rows using grid-template-columns and grid-template-rows properties. With the help of grid-template-columns property, you can the number columns and the desired width of the column. With the help of grid-template-rows, you set the number of rows and its height.

As you can see from the above example, the first column took 1 fraction of the total columns, the second column took 5 fractions of the total columns, and the third column took 2 fractions of the total columns. A single fraction unit means “one piece of however many pieces we are splitting this into”.

It is evident that the same procedure applies for the rows as well. There are 3 rows and the first row contains the header that takes the entire row across all three columns. The second row takes the nav, contents, and sidebar. Finally, the third row contains the footer and just like the first row, it takes up all the three columns.

Hence, the first and the last rows take up the same amount of height (5 fractions) and the center takes up the rest of the remaining height (20 fractions).

Next, we’ve created a gutter of 10px using grid-gap property and set the height of our wrapper to 720px. You can cross-verify these details using the above Codepen snippet and screenshot.

Further, we can style the header and footer with some properties such as grid-column-start and grid-column-end properties to get the desired results. Using these properties, we will instruct the header and footer to make use of the space available in the entire row. Here’s an example code:

From the above example, it is evident that both the header and footer start from grid line 1 and end at grid line 4. As a result, they take up the entire space available in the entire row and the output is as shown below.

Full Code: Wrapping Up

CSS Grid is a powerful way to design the layouts of your web project’s front-end. It works exceptionally well while creating both websites and web apps and helps you get rid of frameworks for the sake of responsive design. Understanding CSS Grid lines, rows, columns, gutter, and cells help with seamless front-end development.

Also Read: CSS Grid Containers

We, at TechAffinity, have expert front-end developers who are capable of handling web projects of any complexity and build intuitive designs. For more information on front-end development and CSS Grid, feel free to send an email to or schedule a meeting with our experts.

Originally published at on August 4, 2020.



TechAffinity is a technology-driven custom software solutions firm delivering unrivaled solutions to companies ranging from #startups to #Fortune500.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tech & Marketing blogs by TechAffinity

TechAffinity is a technology-driven custom software solutions firm delivering unrivaled solutions to companies ranging from #startups to #Fortune500.