CSS Grid

Definition: CSS Grid is a layout module in CSS that provides a flexible way to distribute and align elements within a container.

Purpose and Benefits

• The purpose of CSS Grid in web design is to offer a flexible and efficient way to design and organise web page layouts.
• It allows designers and developers to divide the page into rows and columns, creating a grid of cells where content can be positioned.
• This grid-based approach simplifies the process of creating responsive and dynamic layouts that adapt to different screen sizes and devices.

Grid Terminology

• Introduce terms like grid container, grid items, rows, and columns.
• By using these properties, you can define the structure and behaviour of the grid container, which in turn affect the positioning and layout of its child grid items.

Grid Properties

Display Property

Properties	Value	Explanation
display	grid

Grid Template Properties

Properties	Value	Explanation
grid	template-rows template-columns

Gap Properties

Properties	Value	Explanation
gap	column-gap row-gap grid-column-gap grid-row-gap

Justify-Items Property

Properties	Value	Explanation
justify-items	start end center stretch

Align-Items Property

Properties	Value	Explanation
align-items	start end center stretch

Justify-Content Property

Properties	Value	Explanation
justify-content	start end center stretch space-around space-between

Align-Content Property

Properties	Value	Explanation
align-content	start end center stretch space-around space-between

Example

Code	Output