CSS Grid Layout Module
The CSS Grid Layout Module provides a powerful, grid-based layout system that allows you to create complex and responsive web page layouts with rows and columns. It enables precise placement of items within a defined grid structure, eliminating the need for older layout techniques like floats, positioning, and table layouts.
CSS Grid simplifies the process of aligning elements both horizontally and vertically, offering more flexibility and control over web design, making it easier to create modern, clean, and dynamic page structures that adapt seamlessly to various screen sizes.
Currently Active Property
grid-template-columns: auto; CSS Grid Layout Module creates a grid-based layout system, with the help of rows and columns, and makes it easier to design any webpage without using floats and positioning.
Syntax
.class { display:grid; }
Note: An HTML element becomes a grid if that element sets display: grid; in style section or inline-grid. Below you will see both examples.
CSS Grid Layout Properties
Below is a list of key CSS Grid properties with descriptions:
Property | Description |
|---|---|
Defines the amount of space between columns in a multi-column layout, often used with | |
Specifies the spacing (also called gutter) between rows and columns in CSS Grid and Flexbox layouts. | |
A grid-based layout system in CSS that provides rows and columns, simplifying the design without using floats or positioning. | |
IDefines the size and location of a grid item within a CSS grid layout by specifying the start and end lines. | |
Sets the size of columns that are automatically generated in a CSS Grid layout when more content is added. | |
It specifies exactly how auto-placed items get flow into the grid. | |
It is used to specify the size for the rows of implicitly generated grid containers. | |
It describes the number of properties that allow to design of grid structures and control the placement of grid items using CSS. | |
It explains the number of columns an item will span, or on which column-line the item will end. | |
It is used to set the size of the gap between the columns in a grid layout. | |
It defines for which column line item will start. | |
It is used to sets the size of the gap between the rows and columns in a grid layout. | |
It is used to specify the size and location in a grid layout. | |
It is used to define the grid item’s end position within a grid row by specifying the inline edge of its grid area. | |
It is used to define the size of the gap between the grid elements. | |
It is used to define the grid items’ start position within the grid row by specifying the inline start edge of its grid area. | |
It is a shorthand property for defining grid columns, rows, and areas. | |
It is used to specify the area within the grid layout. | |
It is used to set the number of columns and size of the columns of the grid. | |
It is used to set the number of rows and height of the rows in a grid. |
CSS Grid Layout Module Examples
Example 1: Display Grid Property
This example illustrates the use of display: grid; property.
<!DOCTYPE html>
<html>
<head>
<style>
/* Designing all grid */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: gray;
padding: 5px;
}
/* Designing all grid-items */
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
/* Designing h1 element */
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Creating grid -->
<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>
</body>
</html>
Output:
Example 2: Display inline-grid Property
This example illustrates the use of display : inline-grid; property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Designing all grid */
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: gray;
padding: 5px;
}
/* Designing all grid-items */
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
}
/* Designing h1 element */
h1 {
color: green;
text-align: center;
}
/* Centering content */
.content-center {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="content-center">
<h1>GeeksforGeeks</h1>
<!-- Creating grids -->
<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>
</div>
</body>
</html>
Output:
We can control the gaps in the grid system using these items
- grid-column-gap
- grid-row-gap
- grid-gap
Example 3: Custom Grid Gap
This example uses both grid-column-gap and grid-row-gap to define the custom gap in grids.
<!DOCTYPE html>
<html>
<head>
<style>
/* Designing all grid */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: gray;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding: 5px;
}
/* Designing all grid-items */
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
/* Designing h1 element */
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Creating grids -->
<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>
</body>
</html>
Output:
Note: Similarly grid-gap also works.
You can control individual grids using the following things on a grid system:
- grid-column-lines
- grid-row-lines
Example 4 : Custom Grid Lines
This code use both grid-column-lines and grid-row-lines together to display the customised grid.
<!DOCTYPE html>
<html>
<head>
<style>
/* Designing all grid */
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
/* Designing all grid-items */
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
/* Grid Column */
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
/* Grid row */
.item3 {
grid-row-start: 2;
grid-row-end: 5;
}
/* Designing h1 element */
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- Creating grids -->
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
Output:
Supported Browsers
The browser supported by CSS Grid Layout Module are listed below:
- Google Chrome 57.0
- Microsoft Edge 16.0
- Mozilla Firefox 52.0
- Safari 10.1
- Opera 44.0
Note: Older versions of these browsers may not fully support all CSS Grid properties. Always ensure compatibility by checking for browser updates or using fallback CSS techniques for older browser versions.
CSS Grid Layout Module – FAQs
What is CSS Grid Layout?
CSS Grid Layout is a system that uses rows and columns to create complex, responsive web layouts without floats or positioning.
How do you create a basic grid?
Set display: grid; on a container and define columns and rows with grid-template-columns and grid-template-rows.
What are grid lines?
Grid lines are the dividers that define the boundaries of rows and columns in a grid, used to place items precisely.
Is CSS Grid good for responsive design?
Yes, it adapts layouts to different screen sizes using media queries, fractional units (fr), and the minmax() function.
When to use CSS Grid vs. Flexbox?
Use CSS Grid for two-dimensional layouts (rows and columns) and Flexbox for one-dimensional layouts (row or column).
What does the fr unit do?
The fr unit allocates space within the grid container, proportionally distributing space among grid items.
