Positioning elements on a webpage can be very complicated when working with complex layouts. This is where the CSS grid comes in handy. It is a layout system designed to simplify the process of creating complex layouts.

How does it help you? Unlike traditional layout methods that only allow you to position elements in either rows or columns, CSS grid offers you the best of both worlds—a 2D approach using rows and columns.

A Grid container with four grid items

Grid Containers and Items

you’re able to apply CSS grid properties to two main types of elements: parent and children. When you set the display property to “grid” for a parent element, it transforms that element into a grid container. Any child element within this grid container becomes a grid item, inheriting the applied grid properties.

Here’s how it’s represented:

A grid item can also become a grid container. You can now refer to the layout as a nested grid—a grid within a grid. The main grid container is now referred to as the outer grid, while the item-turned-grid container becomes an inner grid.

Each of these grids operates independently of the other, meaning that the properties set for an inner grid do not affect the layout of the outer grid, and vice-versa.

Grid container with four items, a nested grid container with three items.

Here’s what it looks like:

Mastering the relationship between grid containers and items is essential forbuilding two-dimensional layoutseffectively.

Keep in mind that there are grid properties for grid containers, while others are for grid items.

A2X3 Grid container with six grid items and dashed red lines running along columns and rows

Grid Lines and Tracks

Before you start using the CSS grid, there are two key terms you should be familiar with:

Think of grid lines and tracks as the building blocks of a grid layout, like the lines on a sheet of graph paper. When a horizontal grid line intersects with a vertical grid line, it forms a box-shaped cell. These cells act as containers where you’re able to place your grid items.

A 2X3 Grid layout with six items each with the same height and width

CSS Grid Container Properties

These are properties you can apply to the grid container to organize the layout and assist in positioning elements within it. As mentioned earlier, one of them is the display property set to grid. Here are more:

Grid Template

This property defines the size of rows and columns. You can size these properties using pixels, percentages, or the fractional unit (fr). Also, you can use keywords likeauto,minmax(), andrepeat()to enhance flexibility.

Here are some examples:

Using Pixels:

Using Percentages:

Using auto and minmax() Keywords:

Using repeat() for Consistent Sizing:

Auto Placement and Grid Template Areas

Auto Placement: Auto placement is like letting the grid decide where to put items. If you don’t specify exact positions, the grid will automatically place items in the order they appear in the markup. This is helpful when you have many items and want them to fill the grid evenly.

Grid Template Areas: Think of grid template areas as creating a layout using named zones. It’s like naming rooms on a floor plan. you may refer to these area names when positioning grid items. For instance:

A 2X3 Grid layout with six items, item two and five the same size while the rest has equal but different sizes.

This layout is like a grid with three columns and four rows. There are two rows for the main content area. The labeled areas include “header,” “sidebar,” “content,” and “footer.” In the next sections, you’ll learn how to use these area labels in the properties of each grid item.

Alignment in CSS Grid

You can use alignment properties to control the positioning of grid items within their grid cells. The properties are:

Here’s an example:

In this example, items will center both horizontally and vertically within their cells. Space will be distributed evenly between the columns of the entire grid, and the grid will center vertically in the container.

Grid gap refers to the space between rows and columns in a grid layout. It helps create visual separation and adds some room between grid items.

Thegrid-gapproperty allows you to set the gap between rows and columns. You can use various units to define it, such as pixels (px), percentages (%), em units (em), and more.

In this example, the grid container has two columns with a 20-pixel gap between them. This spacing visually separates the columns and enhances the layout.

CSS Grid Item Properties

Here are some key properties that control the behavior of individual grid items within a CSS grid layout, along with examples:

grid-row-start and grid-row-end:

This code placesGrid Item 1from the second-row line to the fourth-row line.

grid-column-start and grid-column-end:

This code placesGrid Item 2from the first column line to the third column line.

grid-area:

Here’s the result:

justify-self:

This code horizontally centers theGrid Item 5within its cell.

align-self:

This code alignsGrid Item 1to the bottom of its cell.

Feel free to combine and customize these properties to create the layout and look you want for each grid item in your CSS Grid.

Creating Responsive Layouts Using CSS Grids

Using CSS grids forcreating responsive layoutsis important to ensure your webpage adapts seamlessly to various screen sizes and devices. You can apply these methods:

Remember to adjust columns and other elements like gaps between grid items, font sizes, and margins. It ensures a consistent and well-designed layout that works well on various devices.

Explore the Possibilities of CSS Grid Layout

Embracing the flexibility and power of CSS grid will allow you to craft layouts that not only look great but also adapt seamlessly to the demands of modern web design. So, dive into the world of grids, explore the possibilities, and elevate your web development skills.

As you delve into layout systems, you may want to compare other layout methods with CSS grids. You can do so with the CSS Flexbox module. This will help you learn to decide when working on a project.