CSS Grid is a two-dimensional layout system that completely changes designing web pages and makes them far easier compared to the previous systems like floats. Elements are arranged in columns and rows much like a table and it also has a lot of customization options for every design. It also minimizes if not eliminates the use of floats which can be tedious to work with.

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

Syntax:

.parent{
    display:grid;
}

.parent element becomes a grid container and every element which is a direct child of the grid container becomes an item in that grid or a grid item.

Edit this text

Example:

CSS Grid Concepts

Grid Lines:

Grid lines are horizontal and vertical lines that run through the entire CSS grid. These lines separate elements from one another.

Grid Container :

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

.container{

  display:grid;

}

Grid Item:

All of the elements that are direct child of the grid container are known as grid items.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Cell:

Grid Cells are the space present between any four intersecting grid lines. From the table analogy, every table cell can be thought of as a grid cell too.

Grid Track:

The space between any two consecutive grid lines is called a grid track. The lines could be both vertical or horizontal. It is the space or the area between the lines.

Grid Area:

Grid areas are collections of grid cells that form a rectangular area on the grid. Grid areas can be of one cell or multiple cells.

CSS Grid properties

Properties for the Parent (Grid Container)

1. The grid-template-columns property:

We use this property to define the number and width of columns. We can either individually set the width of each column, or set a uniform width for all columns using the repeat() function.

2. The grid-template-rows property:

We use this property to define the number and height of rows. We can either individually set the height of each row, or set a uniform height for all rows using the repeat() function.

3. The grid-template-areas property:

We use this property to specify the amount of space a grid cell should carry in terms of columns and rows across the parent container.

4. The column-gap property:

We use this property to place a gap between Columns inside the grid.

5. The row-gap property:

We use this property to place a gap between Rows inside the grid.

6. The justify-items property:

We use this property to position grid-items inside grid containers along the X-Axis (Main Axis).

7. The align-items property:

We use this property to position grid-items inside the grid container along the Y-Axis (Cross Axis).

8. The justify-content property:

We use this property to position your grid inside the grid container along the X-Axis (Main Axis).

9. The align-content property:

We use this property to position our grid inside the grid container along the Y-Axis (Cross Axis).

CSS Grid Child Properties

1. The CSS Grid Scale:

We made this grid scale to demonstrate the calculations of how rows and columns are joined together. We can use any one of the two types of measurement:

The digit

The span keyword

2. The grid-column: start/end properties:

We use these two properties to join multiple COLUMNS together. It is a shorthand of two properties:

grid-column-start

grid-column-end

3. The grid-row: start/end properties:

We use these two properties to join multiple ROWS together. It is shorthand of two properties:

grid-row-start

grid-row-end

4. The grid-area property:

We need to set up grid-template-areas Once we've done that, we have to specify the names used in the parent class inside the children classes.

5. The justify-self property:

We use this property to position one individual grid-item inside a grid container along the X-Axis (Main Axis).

6. The align-self property:

We use this property to position 1 individual grid-item inside a grid container along the Y-Axis (Cross Axis).