What is Grid Layout?

CSS Grid is a method to arrange the elements of a webpage within a grid, similar to a chessboard.

A grid consists of intersecting horizontal and vertical lines, allowing you to place webpage elements at these intersection points.

This enables you to design your webpage by arranging various elements as if you were assembling a puzzle.

For example, you could place one large image taking up 2 columns wide and 2 rows tall, place a small text element next to it, and then place a tall image below it.

To use a grid, you must first apply the CSS code display: grid; to the container in which you want to use the grid.

This turns the container into a grid container, and the elements within it become grid items.

The number of grid columns and rows can be specified using the CSS properties grid-template-columns (for columns) and grid-template-rows (for rows).

For example, grid-template-columns: repeat(3, 1fr); creates three columns horizontally, and grid-template-rows: repeat(3, 1fr); creates three rows vertically.

Additionally, each grid item can be positioned within the grid using the grid-column and grid-row properties.

For example, grid-column: 1 / 3; makes an item span from the first column to just before the third column.

Similarly, grid-row: 1 / 3; makes an item span from the first row to just before the third row.

Lastly, the gaps between the grid cells (gutters) can be set using the grid-gap property.

For example, grid-gap: 50px; sets a 50px gap between both the columns and rows.

By using two values like grid-gap: 50px 40px;, the first value sets a 50px gap between rows, and the second value sets a 40px gap between columns.

Using CSS Grid allows you to create complex layouts easily and design more efficiently structured webpages.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.

Learn moreSign In