CSS Grid Layout - Complete Guide With Interactive Examples

1. Overview of CSS Grid Layout

Grid Layout is a stunning CSS tool for creating complex layouts in web development and provides a two-dimensional grid-based system to easily position and align HTML elements on a webpage. The grid-based layout in CSS language (also known as CSS grid or simply grid) provides tacks to position the content as per requirements. In this tutorial, we will investigate the fundamentals of CSS Grid, its basic layout terminology, demonstrate how to use it to create responsive and flexible layouts for your websites, and lastly all grid-related properties.

What is CSS Grid Layout?

• CSS grid-layout is a complete set of two-dimensional technique wthat allows us to design interfaces efficiently as compared to all previous layout systems.
• In the past, we used CSS tables, floats, positioning, and inline blocks, but these layout systems always lacked functionality.
• Luckily, we can design complex interfaces using the CSS grid layout system, which divides a webpage into rows and columns or simply tracks.
• These rows and columns form a grid structure in which we can place, align, or position the elements with precision and accuracy.
• Unlike the traditional layout methods like float or position, this grid-based layout system in CSS provides more flexibility and responsiveness with ease.

2. Basic Terminology of CSS Grid Layout

To understand the grid-based layout of CSS, we need to understand the basic layout terminology that form the structure of grids. Here are 6 main elements of a grid layout in CSS language.

1. Grid Container
2. Grid Item
3. Grid Line
4. Grid Cell
5. Grid Area
6. Grid Track
   • Columns
   • Rows

Further, we will see examples and illustrations of these grid elements in detail to comprehend completely.

3. How to Work With CSS Grid Layout?

The advent of the CSS Grid module solved the layout problems that were the basic intention behind its creation. To implement and work with CSS grid layout, we can follow these basic steps.

3.1. Grid Container

• Define a grid container, a parent HTML element, which will contain all the grid items.
• We use display: grid; or display: inline-grid; properties to declare the container as a grid formatting context.
• All child elements in the container will become grid items.
• A grid container can have one or many grid items.

.grid-container{
	display: grid;
}

.grid-container{
	display: inline-grid;
}

3.2. Grid Structure

• As the CSS grid layout is based on rows and columns or tracks, we need to determine the number of rows and columns initially.
• We use properties like grid-template-columns and grid-template-rows to define the size and number of rows and columns.
• To specify the size of columns and rows, we can use various CSS units like px, %, fr, etc or simply use auto value.

.grid-container{
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: auto auto;
}

.grid-container{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: 50px 100px 100px;
}

3.3. Grid Items / Tracks

• All items inside a grid container are known as grid items.
• We can decide the position of a grid item inside the container.
• For this purpose, we use CSS properties like grid-column and grid-row to place the grid items into specific tracks.
• On the other hand, we can utilize the grid-area property to declare named areas inside the containers and then assign items to those areas respectively.
• A grid area is a combination of the grid cells, but it must be in a rectangle shape and not in an L shape.
• Moreover, rows and columns are also called CSS grid tracks.
• We can define a grid track as the space between two adjacent grid lines.

A. Grid Cells

We can define a CSS grid cell as a single unit of the grid container. A grid cell is actually a space between two adjacent row and two adjacent column grid lines. A single grid cell is marked in below instance.

B. Grid Columns

The vertical lines of grid items are called grid-columns.

.grid-item-1 {
	grid-column: 1 / span 2;
}

C. Grid Rows

The horizontal lines of grid items are called grid-rows.

.grid-item-1{
	grid-row: 1 / span 2;
}

.grid-item-1{
	grid-area: 2 / 1 / span 2 / span 3;
}

3.4. Grid Gaps

• The spaces between columns and rows are called grid gaps.
• We can control the spacing between grid tracks (rows and columns) using the grid-gap property.
• Alternatively, we can also use grid-row-gap and grid-column-gap to specify different gap sizes for rows and columns respectively.
• In the below representation, we can see the column gap and row gap.

You can adjust the gap size between columns and rows by using one of the following properties:

1. grid-gap or gap
2. row-gap or grid-row-gap
3. column-gap or grid-column-gap

.grid-container{
	grid-gap: 10px;
}

.grid-container{
	row-gap: 10px;
}

.grid-container{
	column-gap: 10px;
}

3.5. Grid Lines

• A grid line is a line that separates the rows and columns of the grid.
• Grid lines can be horizontal or vertical and reside on either side of a row or a column.
• We can use the grid-template-rows and grid-template-columns properties to name specific lines.
• Moreover, we can also name grid lines using the grid-template-areas property.
• The red lines in the below example represent the grid lines.

We can place an item by referring to grid lines in a container. Check the following example to comprehend this concept.

.grid-item{
	grid-column-start: 1;
	grid-column-end: 3;
}

3.6. Responsive Grid Layouts

• We can make responsive grid layouts with ease.
• For this purpose, we utilize media queries to adjust the grid structure or item placement as per device size or orientation.
• Within media queries, we adjust the grid-template-columns and grid-template-rows properties to make our grid containers responsive.
• Resize the browser window to witness the responsive grid container in the below instance.

3.7. Align and Justify Grid Items

• We use CSS properties like justify-items and align-items for aligning grid items within the grid cells.
• We can also utilize the justify-content and align-content to position the items within the grid container.
• Here are two contrasting examples in which one exemplifies misalignment and the other depicts the proper alignment of items within a grid container.

.grid-container-align {
	justify-items: center;
	align-items: center;
	justify-content: center;
	align-content: center;
}

3.8. Nesting Grids for Complex CSS Layouts

• While working with CSS grids, we can also nest a grid into another.
• We treat this child grid container as a grid item within its parent grid container.
• In this way, we can form more complex layouts.
• A grid is nested within another grid container in the following instance.

3.9. Handle Grid Overflow and Scrolling

• We can use the overflow property to control the visibility and behavior of overflowing content within grid items or the grid container.
• We can also apply overflow-x and overflow-y as needed to enable horizontal or vertical scrolling.
• In the following example, use scroll-bars in the grid container to view the overflow-hidden content.

.grid-container {
	overflow: auto;
}

3.10. Debug and Refine

• To refine and debug your CSS code, use browser developer tools to inspect your grid layouts.
• Make the desired adjustments to grid properties and get the appropriate grid layouts and appearance.
• Check the below image to learn how to debug and refine your grid layouts in developer tools.

4. All CSS Grid Properties

The below table contains all CSS grid-related properties.