What is CSS Grid?

CSS Grid Layout (also known as "Grid") is a powerful two-dimensional layout system for CSS. It allows you to create complex and responsive web layouts with ease, offering more control than older layout methods like floats or flexbox (though flexbox is still great for one-dimensional layouts!).

Instead of thinking about floating elements or calculating widths, you define a grid structure and then place content within that grid. This makes layout far more predictable and maintainable.

Fundamental Concepts

• Grid Container: The parent element that establishes the grid context. You set `display: grid` or `display: inline-grid` on this element.
• Grid Items: The direct children of the grid container. These are the elements that will be positioned within the grid.
• Grid Lines: The horizontal and vertical lines that form the structure of the grid. They define the boundaries of grid cells. Lines are numbered, starting at 1.
• Grid Tracks: The spaces between two adjacent grid lines. Columns and rows are grid tracks.
• Grid Cells: The smallest unit in a grid, defined by the intersection of a row and a column.
• Grid Area: A rectangular space on the grid formed by one or more grid cells.

Basic Syntax

The core properties for working with CSS Grid are defined on the grid container.

`display: grid`

This property turns an element into a grid container, enabling grid layout for its direct children. `display: inline-grid` makes the container an inline-level element.

`grid-template-columns`

Defines the number and size of the columns in the grid. Values can be lengths (px, em, rem), percentages, or the `fr` unit (fractional unit, distributes available space).

 .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 1fr; /*  100px wide, 200px wide, and the rest of the available space */
} 

`grid-template-rows`

Defines the number and size of the rows in the grid. Uses the same types of values as `grid-template-columns`.

 .grid-container {
    display: grid;
    grid-template-rows: 100px auto 1fr; /* 100px height, content based height, and the rest of the available space */
} 

`grid-gap` (or `row-gap` and `column-gap`)

Specifies the size of the gap between grid items. `grid-gap` is shorthand for `row-gap` and `column-gap`.

 .grid-container {
    display: grid;
    grid-gap: 10px; /*  10px gap between rows and columns */
    /* or */
    row-gap: 15px;
    column-gap: 5px;
} 

Placing Grid Items

You can position grid items using line numbers or named grid areas. Properties applied to the grid items themselves.

Using Line Numbers: `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

Specify the start and end line numbers for a grid item. `grid-column` and `grid-row` are shorthand properties.

 .grid-item {
    grid-column-start: 1;
    grid-column-end: 3; /*  Spans from column line 1 to column line 3 (spanning two columns) */
    grid-row-start: 2;
    grid-row-end: 3;
}

/* Shorthand: */
.grid-item {
    grid-column: 1 / 3; /* Start at line 1, end at line 3 */
    grid-row: 2 / 3;
} 

Using Named Grid Areas: `grid-template-areas` and `grid-area`

You can define named areas in the grid container and then assign grid items to those areas. This is often more readable.

 .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "header header header"
        "sidebar main sidebar"
        "footer footer footer";
    gap: 10px;
}

.header { grid-area: header; background-color: lightblue; }
.sidebar { grid-area: sidebar; background-color: lightgreen; }
.main { grid-area: main; background-color: lightcoral; }
.footer { grid-area: footer; background-color: lightyellow; }

/* on each child */ 

Example

Here's a simple example of a grid layout:

`fr` Unit (Fractional Unit)

The `fr` unit represents a fraction of the available space in the grid container. It is very useful for creating responsive layouts.

For example, `grid-template-columns: 1fr 2fr;` divides the available space into three parts, with the first column taking up one part and the second column taking up two parts.

`repeat()` Function

The `repeat()` function simplifies defining repetitive column or row patterns. It takes the number of repetitions and the track size(s) as arguments.

grid-template-columns: repeat(3, 1fr); /* Equivalent to 1fr 1fr 1fr */

grid-template-columns: repeat(2, 100px 200px); /* Equivalent to 100px 200px 100px 200px */