CSS Grid Layout Module

                               

 

Grid Layout

The CSS Grid Layout Module simplifies web page design by providing a grid-based layout system with rows and columns, eliminating the need for floats and positioning.

Browser Support

All modern browsers support the grid properties.

Grid Elements

Grid properties enjoy support across all contemporary web browsers.

Example 

<div class=”grid-container”>   <div class=”grid-item”>1</div>   <div class=”grid-item”>2</div>   <div class=”grid-item”>3</div>   <div class=”grid-item”>4</div>   <div class=”grid-item”>5</div>   <div class=”grid-item”>6</div>   <div class=”grid-item”>7</div>   <div class=”grid-item”>8</div>   <div class=”grid-item”>9</div> </div>

             

Display Property

When the display property of an HTML element is set to grid or inline-grid, it transforms into a grid container.

Example 

.grid-container {   display: grid; }

Example 

.grid-container {   display: inline-grid; }

All immediate descendants of the grid container are automatically designated as grid items.

Grid Columns

The vertical divisions created by grid items are referred to as columns.

Grid Rows

The horizontal divisions formed by grid items are termed rows.

Grid Gaps

The intervals separating each column/row are referred to as gaps.

You can modify the size of the gaps by utilizing one of the following properties:

• column-gap
• row-gap
• gap

Example 

The column-gap property determines the space between columns.

.grid-container {   display: grid;   column-gap: 50px; }

 

Example 

The row-gap property determines the space between rows.

.grid-container {   display: grid;   row-gap: 50px; }

 

Example 

The gap property serves as a shorthand for both the row-gap and column-gap properties.

.grid-container {   display: grid;   gap: 50px 100px; }

 

Example 

The gap property additionally enables the setting of both row and column gaps with a single value.

.grid-container {   display: grid;   gap: 50px; }

Grid Lines

Column lines delineate the boundaries between columns, while row lines demarcate the boundaries between rows.

Specify line numbers when positioning a grid item within a grid container.

Example 

Position a grid item from column line 1 to column line 3.

.item1 {   grid-column-start: 1;   grid-column-end: 3; }

 

Example 

Position a grid item from row line 1 to row line 3.

.item1 {   grid-row-start: 1;   grid-row-end: 3; }