grid

CSS Grid Layout, often simply referred to as Grid, provides a two-dimensional grid-based layout system that allows you to layout items into rows and columns, and it's a fantastic tool for building complex, responsive designs. This model gives more control over the various grid items and their placement in a predefined layout grid.

Basic Concepts:

Grid Container: The element on which display: grid or display: inline-grid is applied. It’s the direct parent of all the grid items.

Grid Items: The children of the grid container.

Grid Lines: The dividing lines that make up the structure of the grid. They can be horizontal or vertical ("rows" or "columns").

Grid Tracks: The space between two adjacent grid lines. Can be horizontal (rows) or vertical (columns).

Grid Cell: A single unit of the grid.

Main Properties:

Grid Container Properties:

display: Define a container as a grid container with grid or inline-grid.

grid-template-rows / grid-template-columns: Define the columns/rows of the grid.

grid-gap: Shorthand for grid-row-gap and grid-column-gap, specifies the size of the gap between the rows/columns.

grid-row / grid-column: Position and size an item in terms of row and column lines.

justify-items: Align grid items along the row (inline) axis.

align-items: Align grid items along the column (block) axis.

justify-content: Align the whole grid along the row (inline) axis.

align-content: Align the whole grid along the column (block) axis.

Grid Item Properties:

grid-column-start / grid-column-end: Determine where a grid item starts/ends in terms of column grid lines.

grid-row-start / grid-row-end: Determine where a grid item starts/ends in terms of row grid lines.

grid-area: A shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

justify-self: Align an item inside a cell along the row (inline) axis.

align-self: Align an item inside a cell along the column (block) axis.

Example:

css

/* Container */
.grid-container {
 display: grid;
 grid-template-rows: 100px 200px;
 grid-template-columns: 1fr 2fr;
 grid-gap: 10px;
}
/* Items */
.grid-item {
 grid-column: span 2;
}

html

<div class="grid-container">
 <div class="grid-item">Item 1</div>
 <div class="grid-item">Item 2</div>
 <div class="grid-item">Item 3</div>
</div>

Usage:

CSS Grid is primarily used for laying out larger scale layouts that require more control over the positioning of elements and their size, without relying on a strict flow of content. It is incredibly useful for any kind of two-dimensional layout whether that be a page or a specific pattern/component.

Browser Support:

CSS Grid is widely supported in modern browsers, making it a reliable choice for web design.

CSS Grid and Flexbox can work together to create a robust layout system for your web projects. Grid is excellent for two-dimensional layouts, while Flexbox is superb for one-dimensional layouts. Both provide more flexibility and control in web design, without having to resort to frameworks or additional coding.