Grid

CSS Grid is a two-dimensional layout system that makes designing web pages easier with the help of rows and columns. It uses rows and columns to lay out elements on the web page.

A CSS grid contains a parent usually referred to as a grid container and one or more child elements called grid items.

Terminologies

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

• Grid Item - The children (i.e. direct descendants) of the grid container.

• Grid Cell - The space between two adjacent rows and two adjacent column grid lines. It’s a single “unit” of the grid.

• Grid Line - The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column.

• Grid Track - The space between two adjacent grid lines. You can think of them as the columns or rows of the grid.

• Grid Area - The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells.

• Gutter - The gutter is the space between any two adjacent rows or columns.

Grid Properties

CSS Grid possesses various properties where some properties are applied to the grid container (parent) while some are applied to the grid items (children).

• Display

To define a grid, we use the grid or inline-grid value of the display property, then the element becomes the grid container and all direct children of that element become grid items.

Grid items are placed in rows by default and span the full width of the grid container.

.container{
    display : grid;
}

Grid items are placed in rows by default and span the full width of the grid container.

• grid - template - columns

The grid-template-columns property is used to set the number of columns and the size of the columns of the grid.

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
}

Here, the grid items are divided into 3 columns.

• grid-template-rows

The grid-template-rows property is used to set the number of rows and the size of the rows of the grid.

.grid-container{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr;
}

Here, grid items are divided into 2 rows and 4 columns.

We can also use a repeat() function, the first value passed to repeat() is the number of repetitions and the second value is the grid tracks(row/column) to repeat.

.container{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 1fr);
}

• column-gap

The column-gap (grid-column-gap) property of CSS specifies the size of the gap between the columns in a grid layout.

.container{
    column-gap: 5px;
}

• row-gap

The row-gap (grid-row-gap) property of CSS specifies the size of the gap between the rows in a grid layout.

.container{
    row-gap: 10px;
}

• gap

The gap (grid-gap) property of CSS specifies the size of the gaps between rows and columns in a grid layout. It is a shorthand property for setting row-gap and column-gap in a single declaration.

.container{
    gap:15px;
}

If a single value is specified, that value is set for both row-gap and column-gap properties. If two values are specified, the first value is set for the row-gap property and the second value is set for the column-gap property.

.container{
    gap:10px 20px;
}

• justify-items

The justify-items property of CSS specifies the horizontal alignment of grid items in the grid cell. It aligns the grid items along the row axis. The possible values are:

start: The grid items are aligned horizontally toward the starting (left) edge of the alignment container.

end: The grid items are aligned horizontally toward the ending (right) edge of the alignment container.

center: The grid items are aligned horizontally in the center of the alignment container.

stretch: The grid items are horizontally aligned, causing them to fill the whole width of the alignment container.

.container{
    justify-items: start | end | center | strech;
}

• align-items

The align-items property of CSS specifies the vertical alignment of grid items in the grid cell. It aligns the grid items along the column axis. The possible values are:

start: The grid items are aligned vertically toward the top edge of the alignment container.

end: The grid items are aligned vertically toward the bottom edge of the alignment container.

center: The grid items are aligned vertically in the center of the alignment container.

stretch: The grid items are vertically aligned, causing them to fill the whole height of the alignment container.

.container{
    align-items: start | end | center | strech;
}

• grid-column-start - The grid-column-start property specifies which column line the grid item will start. It is applied to the grid items (child).

.grid-items{
    grid-column-start : auto;
    grid-column-start : span 2;
    grid-column-start : 4;
}

auto: It does not affect the position of the grid item, indicating auto-placement, an automatic span, or a default span of 1.

span n: The item will span n number of columns. If the <integer> n is omitted, it defaults to 1. Negative integers and 0 are invalid.

column-line: The item will start from that column line. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

• grid-column-end - The grid-column-end property specifies which column line the grid item will end, or the number of columns the item will span.

grid-column-end: auto | span n | column-line;

• grid-row-start - The grid-row-start property specifies which row line the grid item will start.

grid-row-start: auto | span n | row-line;

auto: It does not affect the position of the grid item, indicating auto-placement, an automatic span, or a default span of 1.

span n: The item will span n number of rows. If the <integer> n is omitted, it defaults to 1. Negative integers and 0 are invalid.

row-line: The item will start from that row line. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

.grid-items{
    grid-row-start : auto;
    grid-row-start : span 2;
    grid-row-start : 4;
}

• grid-row-end - The grid-row-end property specifies which row line the grid item will end, or the number of rows the item will span.

grid-row-end: auto | span n | row-line;