CSS Grid Layout Module
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.
Currently Active Property
grid-template-columns: auto; Syntax
.class {
display:grid;
}
Note: You can also use display: inline-grid; to make an element an inline grid.
<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 |
|---|---|
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. |
More Examples of CSS Grid Layout Module
Three-Column Layout
<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>
<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>
<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
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.
