What is Grid Layout?

CSS Grid refers to a method of placing items on a webpage within a grid layout, much like a chessboard.

The grid consists of intersecting horizontal and vertical lines, allowing webpage elements to be placed at these intersection points.

This enables you to design web pages like solving a puzzle with various elements.

For example, you could have a large image take up 2 columns and 2 rows, place a smaller text element beside it, and a vertically long image below.

To use a grid, first apply the code display: grid; to the container where the grid will be set.

This transforms the container into a grid container, and the elements inside become grid items.

The number of grid cells can be determined using CSS properties grid-template-columns (for vertical) and grid-template-rows (for horizontal).

For instance, writing grid-template-columns: repeat(3, 1fr); creates 3 columns, and grid-template-rows: repeat(3, 1fr); creates 3 rows vertically.

You can then apply grid-column and grid-row code to each grid item to define which parts of the grid they occupy.

For example, an item with grid-column: 1 / 3; will occupy space from the 1st column to just before the 3rd column vertically.

Similarly, an item with grid-row: 1 / 3; will cover space from the 1st row to just before the 3rd row horizontally.

Finally, the space between grids (gutter) can be set using the grid-gap property.

For example, grid-gap: 50px; will create a 50px gap between adjacent rows and columns.

If you provide two values like grid-gap: 50px 40px;, the first value sets the space between rows (50px), and the second value sets the space between columns (40px).

Using CSS Grid in this way allows you to easily create complex layouts and more efficiently structure your web pages.