What is Grid

CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.

Properties for the Parent (Grid Container)

1. Display

Display Property Defines the element as a grid container and establishes a new grid formatting context for its contents.

Syntax:

.container{
    display: grid;
}

2. Grid Template Columns and Grid Template Rows

Defines the columns and rows of the grid with a space-separated list of values.

1. Grid Template Rows

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list, where each value specifies the height of the respective row.

Syntax:

.container{
// we can use any syntax both will perform the same task
grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}

2. Grid Template Columns

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. The values are a space-separated list, where each value specifies the size of the respective column.

Syntax:

.container{
// we can use any syntax both will perform the same task
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
}

3. Grid Template Area

The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property and then reference to the name in the grid-template-areas property. Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.

Syntax:

.container{
    grid-template-areas:
          "item1 item2 item2"
          "item3 item2 item2"
}

4. Gap

The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties:

Syntax:

.container{
    gap:row_gap column_gap
}

1. Row Gap

As the name suggest it will apply gap between rows.

Syntax:

.container{
    row-gap:10px;
}

2. Column Gap

As the name suggest it will apply gap between columns.

Syntax:

.container{
    column-gap:10px;
}

Properties for the Children (Grid Items)

1. Grid Column and Grid Row

1. Grid Column Start

The grid-column-start property defines on which column-line the item will start.

Syntax:

.item{
    grid-column-start: start-index;
}

2. Grid Column End

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end

Syntax:

.item{
    grid-column-end: end-index;
}

3. Grid Row Start

The grid-row-start property defines on which row-line the item will start.

Syntax:

.item{
    grid-row-start: start-index;
}

4. Grid Row End

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end

Syntax:

.item{
    grid-row-end: end-index;
}

2. Grid Area

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property

Syntax:

.item{
   grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}