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.

Header
Left
Section
Right
Footer

Try in CodeLab

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.
Display: grid; (Block Element)
1
2
3
.grid-container{
	display: grid;
}

Try in CodeLab

Display: inline-grid; (Inline Element)
1
2
3
a
b
c
.grid-container{
	display: inline-grid;
}

Try in CodeLab

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.
Create 3 columns and 2 rows
1
2
3
4
5
6
.grid-container{
	display: grid;
	grid-template-columns: 20% 60% 20%;
	grid-template-rows: auto auto;
}

Try in CodeLab

Create 3 columns and 3 rows
1
2
3
4
5
6
7
8
9
.grid-container{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: 50px 100px 100px;
}

Try in CodeLab

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 Area Columns
1
2
3
4
5
.grid-item-1 {
	grid-column: 1 / span 2;
}

Try in CodeLab

C. Grid Rows

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

Grid Area Rows
1
2
3
4
5
.grid-item-1{
	grid-row: 1 / span 2;
}

Try in CodeLab

Grid Area
1
2
3
4
5
6
7
.grid-item-1{
	grid-area: 2 / 1 / span 2 / span 3;
}

Try in CodeLab

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 Gap
.grid-container{
	grid-gap: 10px;
}

Try in CodeLab

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

Try in CodeLab

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

Try in CodeLab

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.
  • Lines between columns are called column lines.
  • Lines between rows are called row lines.

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

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

Try in CodeLab

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.
1
2
3
4
5
6

Try in CodeLab

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.
Without Alignment
1
2
3
4
5
6
With Alignment
1
2
3
4
5
6
.grid-container-align {
	justify-items: center;
	align-items: center;
	justify-content: center;
	align-content: center;
}

Try in CodeLab

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.
1
2
a
b
c
d
e
f
4

Try in CodeLab

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.
1
2
3
4
5
6
.grid-container {
	overflow: auto;
}

Try in CodeLab

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.

CSS Grids Refining and Debugging Via Developer Tools

4. All CSS Grid Properties

The below table contains all CSS grid-related properties.

Property Description
align-content It aligns the grid items along the column axis when there is extra space.
align-items It aligns the grid items along the row axis in the container.
column-gap We can define the gap between the columns with this property.
display This property defines a grid container.
gap A shorthand property for the row-gap and the column-gap properties.
grid It is a shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.
grid-area It either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
grid-auto-columns We can define a default column size with this property.
grid-auto-flow It specifies how auto-placed items are inserted in the grid layout.
grid-auto-rows We can define a default row size with this property.
grid-column It is a shorthand property for the grid-column-start and the grid-column-end properties.
grid-column-end We can declare the ending point, where a grid item ends in a column within the container.
grid-column-gap It specifies the size of the gap between columns in a layout.
grid-column-start We can declare the starting point, from where a grid item starts in a column within the container.
grid-gap It is a shorthand property for the grid-row-gap and grid-column-gap properties.
grid-row Another shorthand property for the grid-row-start and the grid-row-end properties.
grid-row-end We can declare the ending point, where a grid item ends in the container.
grid-row-gap It specifies the size of the gap between rows.
grid-row-start We can declare the starting point, from where a grid item starts on a row within the container.
grid-template It is a shorthand property for multiple grid properties.
grid-template-areas Defines named grid items and how to display columns and rows in a CSS grid layout.
grid-template-columns It defines the size and quantity of the columns in a grid layout.
grid-template-rows It defines the size and number of the rows in a grid layout.
justify-content Align the grid items along the row axis in the layout.
justify-items Align the grid items along the column axis in the layout.
order It specifies the order of a grid item within the container.
row-gap It specifies the gap between the grid rows.
You can also visit this tutorial to check all CSS properties reference list.
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us