How to Design a Web Page Using CSS Grid Properties

A tutorial on creating a grid layout with CSS

Photo by AltumCode on Unsplash

When we are creating a web page, we must consider the way the content is arranged, the user’s attractiveness, clarity, and ease of creation. Grid is an easy method to create a web page without floats and positioning. The grid layout mainly consists of rows and columns. Here I’m going to consider some of the grid properties required to create a grid layout.

💡 Before diving into the code, it’s worth mentioning that you could also reuse your CSS grid styling across all your projects if you want. Tools such as Bit let you encapsulate your styling logic into independent components, enabling you to reuse them across multiple projects.

Learn more here:

Tutorial: Create Reusable CSS Components with Bit

The “display” Property

We use the grid value or inline-grid value of the display property to define a grid.

.container {
display: grid;
}

Grid Gap

Gaps are the spaces between each column and row.

We can adjust these grid gaps using grid-column-gap, grid-row-gap, or grid-gap properties.

.container {
display: grid;
grid-row-gap: 50px; //row gap 50px
grid-column-gap: 10px; //column gap 10px
}

Also, we can use the grid-gap property instead of the above properties.

.container {
display: grid;
grid-gap: 50px 10px; // row gap 50px and column gap 10px
}

The “grid-template-columns” Property

Grid-template-columns Property is used to define the number of columns in the grid layout and the width of each column. We can give any length unit or a percentage to this grid-template-column value. Also, we can use “auto” or “fr” units.

.container {
display: grid;
grid-template-columns: 200px auto auto 550px;
}

We can create flexible rows and columns using “fr” units. The “fr” unit distributes the available space in the grid container, not all space.

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 3fr;
}

The “grid-template-rows” Property

Grid-template-rows Property is used to define the height of each row in the grid layout.

.container {
display: grid;
grid-template-rows: 80px 160px;
}

The “grid-column” property

When we want to define in which column an item should be placed, we use the grid-column property. What is done here is to define the starting point and the ending point of an item. We can do it in two ways, using the line numbers or the keyword “span”.

.grid-item1 {
grid-column: 1 / 4; //Item 1 starts on column 1 and ends before column 4
}

.grid-item2 {
grid-column: 2 / span 3; //Item 2 starts on column 2 and span 3 columns
}

The “grid-row” property

When we want to define in which row an item should be placed, we use the grid-row property. What is done here is to define the starting point and the ending point of an item. We can do it in two ways, using the line numbers or the keyword “span”.

.grid-item1 {
grid-row: 1/ 3; //Item 1 starts on row 1 and ends before row 3
}

or

.grid-item1 {
grid-row: 1/ span 2; //Item 1 starts on row1 and span 2 rows
}

The “grid-area” Property

We can use the grid-area Property instead of the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties. Also, it can be used to assign names to grid items.

.grid-item4 {
grid-area: 1 / 2 / 3 / 6; //Item 4 starts on row 1 and column 2, and end on row 3 and column 6
}

or

.grid-item4 {
grid-area: 1 / 2 / span 2 / span 4; //Item 4 starts on row 1 and column 2, and span 2 rows and span 4 columns
}

The “grid-area-template” property

The grid-area-template property can contain named grid items of the grid container. Each row is defined by apostrophes and each column is defined by inside the apostrophes, separated by a space.

.grid-item1 { grid-area: header; }
.grid-item2 { grid-area: menu; }
.grid-item3 { grid-area: main; }
.grid-item4 { grid-area: right; }
.grid-item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
‘header header header header header header’
‘menu main main main right right’
‘menu footer footer footer footer footer’;
}

Full HTML CSS code for the above template

<!DOCTYPE html>
<html>
<head>
<style>
.grid-item1 { grid-area: header; }
.grid-item2 { grid-area: menu; }
.grid-item3 { grid-area: main; }
.grid-item4 { grid-area: right; }
.grid-item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
‘header header header header header header’
‘menu main main main right right’
‘menu footer footer footer footer footer’;
grid-gap: 20px;
background-color: #7c0842;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”grid-item1">Header</div>
<div class=”grid-item2">Menu</div>
<div class=”grid-item3">Main</div>
<div class=”grid-item4">Right</div>
<div class=”grid-item5">Footer</div>
</div>
</body>
</html>

Conclusion

Here are just a few basic grid properties you can use to create a grid layout. In addition, there are many other types of grid properties in CSS and you can use all of them to make your web page more creative.

……………………………………………………………………………..

Hope you enjoyed my article and think this would be helpful for you to know something about CSS grid properties.

Thank You!

Build better Component Libs and Design Systems

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo

Learn more:

Creating a Developer Website with Bit components

How We Build Micro Frontends

How we Build a Component Design System

How to reuse React components across your projects

5 Ways to Build a React Monorepo

How to Create a Composable React App with Bit

How to Reuse and Share React Components in 2023: A Step-by-Step Guide

5 Tools for Building React Component Libraries in 2023

References

W3Schools Online Web Tutorials

MDN Web Docs