CSS Grid Layout is used to design responsive web layouts with rows and columns. It allows you to place items exactly where you want, making it easier to create flexible and modern web pages.
Unlike older methods like floats, CSS Grid gives more control over alignment and adapts well to different screen sizes.
Syntax
.class {
display: grid;
}Note: You can also use display: inline-grid; to make an element an inline grid.
HTML
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
- 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.
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
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
<div class="grid-item">Column 3</div>
</div>
</body>
</html>
In this example:
- 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
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: auto auto;
gap: 15px;
}
.grid-item {
background-color: #e0e0e0;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1</div>
<div class="grid-item">Row 2</div>
</div>
</body>
</html>
In this example:
- The .grid-container is defined as a grid with two rows (auto height) and a 15px gap between them.
- Each .grid-item represents a row with minimal styling for demonstration.
Four-Item Grid with Unequal Column Widths
HTML
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
In this example:
- The .grid-container is defined as a grid with two columns, where the first column takes up one fraction (1fr) of the available space, and the second column takes up two fractions (2fr), creating unequal column widths.
- Each .grid-item represents a grid cell with minimal styling for demonstration purposes.
Best Practices for CSS Grid Layout
- Use Flexible Units: Utilize flexible units like fr and minmax() to create responsive layouts that adapt to various screen sizes.
- Define Explicit Grid Areas: Clearly specify grid areas using grid-template-areas for better readability and maintainability of your code.
- Combine with Other Layout Methods: Integrate CSS Grid with Flexbox to leverage the strengths of both and achieve complex, responsive design.
What does the grid-template-columns: 1fr 2fr property do in Grid Layout?
-
Creates two columns with equal widths
-
Creates two columns with a 1:2 width ratio
-
Creates a single column with a fraction of available space
-
Creates three columns with different fractions
Explanation:
The grid-template-columns property defines the width of grid columns. Using 1fr 2fr means the first column takes 1 fraction of space, and the second takes 2 fractions.
What does the grid-gap: 10px property do in Grid Layout?
-
Sets the gap between grid rows only
-
Sets the gap between grid columns only
-
Sets the gap between both rows and columns
-
Sets the padding inside grid items
Explanation:
The grid-gap (or gap) property sets the spacing between both rows and columns in a grid layout, in this case, a 10px gap.
What is the purpose of the grid-template-areas property in Grid Layout?
-
To define grid item sizes
-
-
To name grid areas for easier item placement
-
Explanation:
The grid-template-areas property allows you to define named areas in the grid, making it easier to position items in specific sections.
What does grid-auto-rows: 100px do in Grid Layout?
-
Sets the height of all grid rows
-
Defines a fixed height for each grid item
-
Defines the height of rows that are implicitly created
-
Sets the height of the grid container
Explanation:
The grid-auto-rows property defines the height of rows that are automatically created when content overflows or grid items extend beyond the defined grid template.
Which CSS property defines the number and size of grid columns?
Explanation:
grid-template-columns sets how many columns a grid has and their widths.
Quiz Completed Successfully
Your Score : 2/5
Accuracy : 0%
Login to View Explanation
1/5
1/5
< Previous
Next >