CSS Grid Layout Module (original) (raw)
Last Updated : 21 Jan, 2026
The CSS Grid Layout Module is a powerful two-dimensional layout system that enables the creation of complex and responsive designs. It allows precise control over rows, columns, and the positioning of elements.
- Grid layouts work with both rows and columns simultaneously.
- It helps create structured and responsive page layouts.
- Elements can be positioned precisely using grid lines and areas. HTML `
Item 1
Item 2
Item 3
Item 4
`
- The .grid-container uses display: grid; to define a grid layout with two columns (grid-template-columns: auto auto;) and a 10px gap between items.
Syntax:
.class { display: grid;}
**Note: You can also use display: inline-grid; to make an element an inline grid.
CSS Grid Layout Properties
Below is a list of key CSS Grid properties with descriptions:
| Property | Description |
|---|---|
| **column-gap | Defines the amount of space between columns in a multi-column layout, often used with column-count in CSS Grid. |
| **gap | Specifies the spacing (also called gutter) between rows and columns in CSS Grid and Flexbox layouts. |
| **grid | A grid-based layout system in CSS that provides rows and columns, simplifying the design without using floats or positioning. |
| **grid-area | Defines the size and location of a grid item within a CSS grid layout by specifying the start and end lines. |
| **grid-auto-columns | Sets the size of columns that are automatically generated in a CSS Grid layout when more content is added. |
| **grid-auto-flow | It specifies exactly how auto-placed items get flow into the grid. |
| **grid-auto-rows | It is used to specify the size for the rows of implicitly generated grid containers. |
| **grid-column | It describes the number of properties that allow to design of grid structures and control the placement of grid items using CSS. |
| **grid-column-end | It explains the number of columns an item will span, or on which column-line the item will end. |
| **grid-column-gap | It is used to set the size of the gap between the columns in a grid layout. |
| **grid-column-start | It defines for which column line item will start. |
| **grid-gap | It is used to sets the size of the gap between the rows and columns in a grid layout. |
| **grid-row | It is used to specify the size and location in a grid layout. |
| **grid-row-end | It is used to define the grid item's end position within a grid row by specifying the inline edge of its grid area. |
| **grid-row-gap | It is used to define the size of the gap between the grid elements. |
| **grid-row-start | It is used to define the grid items' start position within the grid row by specifying the inline start edge of its grid area. |
| **grid-template | It is a shorthand property for defining grid columns, rows, and areas. |
| **grid-template-areas | It is used to specify the area within the grid layout. |
| **grid-template-columns | It is used to set the number of columns and size of the columns of the grid. |
| **grid-template-rows | It is used to set the number of rows and height of the rows in a grid. |
More Examples of CSS Grid Layout Module
Three-Column Layout
HTML `
Column 1
Column 2
Column 3
`
- The .grid-container is set to display as a grid with three equal-width columns (1fr each) and a 10px gap between them.
- Each .grid-item represents a column with basic styling for clarity.
Responsive Two-Row Layout
HTML `