Introduction

CSS Grid is a two-dimensional grid-based layout system. It has some unique features as compared to flexbox and is used for more symmetrical layout rendering. It allows the alignment of elements into columns and rows. It can also facilitate the overlapping of elements.

Basics

The container containing the necessary elements must be declared as a grid with display: grid.
The column and row sizes can be set with grid-template-columns and grid-template-rows.
The child elements can be placed into the grids with grid-column and grid-row.

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

Grid Line: These lines create divisions and make up the structure of the grid. They can be either vertical as column grid lines or horizontal as row grid lines.

Grid Track: It is the space between two adjacent grid lines.

Grid Area: It is an area surrounded by four grid lines.

Grid Item: The direct children of the grid container. Here the item elements are grid items, but sub-item (children of item) isn’t.

Grid Cell: It is the space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid.

Properties

Properties for the Parent (Grid Container)

display

Syntax: display: grid | inline-grid

It establishes a new grid formatting context for its contents by defining the parent element as a grid container.

The display: grid sets a block-level grid while the display: inline-grid sets an inline-level grid.

grid-template-columns and grid-template-rows

These set the space between the columns and the rows. This space can be called track size.

Values:

track-size: It can be a length, a percentage, or a fraction of the free space with fr unit.
line-name: It is a random name (it would be nice if it depicts that particular column or row).

/* If container-one and container-two are two grid containers */
.container-one {
    display: grid;
    grid-template-columns: [line-start] 40px [line2] 50px [line3] auto      [line4] 50px [line5] 40px [line-end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [line-third] auto [line-last];
}
.container-two {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

grid-template-areas

This property specifies areas within the grid layout by referencing the names of the grid areas which are specified with the grid-area property.

Values:

<grid-area-name> – the name of a grid area specified with grid-area
. – a period signifies an empty grid cell
none – no grid areas are defined

.item-one {
    grid-area: areaOne;
}
.item-two {
    grid-area: areaTwo;
}
.item-three {
    grid-area: areaThree;
}
.item-four {
    grid-area: areaFour;
}
.container {    
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: 
    "areaOne areaOne areaOne areaOne"
    "areaTwo areaTwo . areaThree"
    "areaFour areaFour areaFour areaFour";
}

column-gap and row-gap

Syntax: column-gap: <length> row-gap: <length>

The column-gap sets the size of the gap between an element's columns.

The row-gap sets the size of the gap between an element's rows.

gap

Syntax: gap: <row-gap> <column-gap>

This is a shorthand for row-gap and column-gap. If only one value is given then the value is applied to both properties.

justify-items

Syntax: justify-items: start | end | center | stretch

This aligns grid items along the row axis. This is applied to all the items inside the grid container.

Values:

start: it aligns all the items at the start edge of their cell
end: it aligns all the items at the end edge of their cell
center: it aligns all the items in the center of their cell.
stretch: it fills the whole width of the cell (default).

align-items

Syntax: align-items: start | end | center | stretch

It aligns the grid items along the column axis. It applies to all the items inside the grid container.

place-items

Syntax: place-items: <align-items> | <justify-items>

It is used as a short-hand for both align-items and justify-items respectively. It is applied for multidirectional centering.

justify-content

This aligns the grid along the row axis of the grid container when the grid size is less than the size of its grid container as sometimes the grid items are sized with non-flexible units like px.

Values:

space-around: it places an even amount of space between each grid item, with half-sized spaces on the far ends.
space-between: it places an even amount of space between each grid item, with no space at the far ends.
space-evenly: it places an even amount of space between each grid item, including the far ends.

align-content

This aligns the grid along the column axis of the grid container when the grid size is less than the size of its grid container as sometimes the grid items are sized with non-flexible units like px.

place-content

Syntax: place-content: <align-content> <justify-content>

It is the short-hand property for align-content and justify-content respectively.

In case, only one value is declared then the value is applied to both properties.

grid-auto-columns and grid-auto-rows

Syntax: grid-auto-columns: <track-size>... grid-auto-rows: <track-size>...

It specifies the size of any auto-generated grid column or row (implicitly-created grid column or row).

grid-auto-flow

Syntax: grid-auto-flow: row | column | row dense | column dense

This works through the auto-placement algorithm to automatically place the items.

Values:

row: it tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default). If neither row nor column is provided, row is assumed.
column: items are placed by filling each column in turn, adding new columns as necessary.
dense: it tells the algorithm to fill in holes earlier in the grid if smaller items come up later.

Note: Spots for two items should be specified.

Properties for the children (Grid Items)

grid-column-start, grid-column-end, grid-row-start, and grid-row-end

It determines the location of a grid item within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

Values:

<line>: it can be a number to refer to a numbered grid line, or a name to refer to a named grid line.
span <number>: it enables the item to span across the provided number of grid tracks.
span <name>: it tells the item to span across until it hits the next line with the provided name.
auto: it indicates auto-placement, an automatic span, or a default span of one.

justify-self

Syntax: justify-self: start | end | center | stretch

It helps to align a particular grid item inside a cell along the row axis.

align-self

Syntax: align-self: start | end | center | stretch

It helps to align a particular grid item inside a cell along the column axis.

place-self

Syntax: place-self: <align-self> | <justify-self>

It is the short-hand property for align-self and justify-self. If the second value is not present, the value is used for both.

Code

https://codepen.io/abhisahu963/pen/PodaRdQ

Thanks for reading.

CSS Grid

Introduction

Basics

Properties