CSS Grid Layout, commonly known as Grid, is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.
Introduction to Grid
A grid layout consists of a parent element, with one or more child elements. An HTML element becomes a grid container when its display property is set to grid or inline-grid.
.container {
display: grid;
}Grid containers consist of grid items, placed inside columns and rows.
Grid Properties
There are numerous properties that help you shape your grid layout:
- grid-template-columns
- grid-template-rows
- grid-gap
- justify-items
- align-items
Grid Template Columns and Rows
The grid-template-columns and grid-template-rows properties define the number and size of the rows and columns in the grid.
.container {
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
}Grid Gap
The grid-gap property is shorthand for grid-row-gap and grid-column-gap, specifying the size of the gap between the rows and columns.
.container {
grid-gap: 10px 15px;
}Justify Items and Align Items
The justify-items property aligns grid items along the row (inline) axis, and align-items aligns grid items along the column (block) axis.
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}Responsive Design with Grid
Grid makes the creation of responsive designs incredibly straightforward. With a little creativity, you can design complex layouts that adapt seamlessly to different screen sizes.
