GRID

We use flexbox for displaying the content in 1 dimension, either we can arrange them in rows or we can arrange them in rows, but if we want to display our content in 2 dimensional that is rows as well as in column then we use GRID. To use grid layout we need to apply display:grid in parent element containing child elements which needs to be arranged in grid format. Our phone gallery MS Excel can be real life example for grid.

Syntax

.container{
display:grid;

Properties For Parent Element:-

1. Grid Template Rows and Grid Template Columns

1.1 Grid Template Rows

Using grid template rows we can assign rows to the container, we can also set the height of the column in the grid layout.

Syntax

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

1.2 Grid Template Columns

Using grid template columns we can assign columns to the container, we can also set the width of each column in the grid layout.

Syntax

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

Eg.

2. Grid Template Area

It is used position our elements in a web page. We can easily set the layout of our webpage by using this property. We need to keep in mind some points before using the grid template area property. We need to give grid-area property to child elements and assign a name to that which we can use in grid-template-area.

1. We need to have every cell of the grid filled.
2. To span across 2 or more , repeat the names accordingly.
3. If you wish to leave a cell empty, use a . (period).
4. Areas must be rectangular — for example, we can't have an L-shaped area.
5. We cannot repeat the areas at different location.

Syntax

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

3. Gap

As the name suggest it is used to provide gap between rows and columns, by default the gap value of row and column is 0, we assign the gap property in our parent container.

Syntax

.container{
gap:row_gap column_gap
eg.
gap:10px 20px; 
}

It will give gap 10px gap in row and 20px gap in column. If we use single value in gap then that will be applied in both rows and columns.

There are two more gap properties.

3.1. Row Gap

As the name suggest it will apply gap between rows.

Syntax

.container{
row-gap:10px;
}

3.2 Column Gap

As the name suggest it will apply gap between columns.

Syntax

.container{
column-gap:10px;
}

4. Justify Content and Align-Content

4.1 Justify Content

It is used to align the items in Inline/Row axis(Horizontally).

4.2. Align Content

It is used to align the items in Block/Column axis(Vertically).

We can set the items in middle of our web page by setting align-content and justify-content values as center. We also have different values for align-content and justify-content.

Eg.

Properties for Child Elements

1. Grid Area

We use grid area in the child element. We can use this by using grid-template-areas in parent container. We define names of items in container by using grid-area.

Syntax

.item1{
        grid-area: nav;
      }

2. Grid Column

We use grid-column to define the start and end index for the child element.

Syntax

.item1{
grid-column:start_index/end_index;
}

We also have 2 other properties for setting up the start and end index.

2.1 Grid Column Start

We can define the starting index or column number by using this.

Syntax

.item1{ grin-column-start:2; }

2.2 Grid Column End

We can define the ending index or column number by using this.

Syntax

.item1{ grin-column-end:4; }

2.1 Grid Row Start

We can define the starting index or row number by using this.

Syntax

.item1{ grin-row-start:2; }

2.2 Grid Row End

We can define the ending index or row number by using this.

Syntax

.item1{ grin-row-end:4; }