In this lesson, we will dive into creating layouts using CSS Grid. CSS Grid is a powerful layout system that allows for the creation of complex and responsive web designs with ease. By the end of this lesson, you will be able to create various grid layouts and understand how to manipulate grid items within a grid container.
Key Concepts
- Grid Container: The element on which
display: gridis applied. It contains grid items. - Grid Items: The direct children of the grid container.
- Grid Lines: The lines that divide the grid into cells.
- Grid Tracks: The rows and columns of the grid.
- Grid Areas: The rectangular areas that can be formed by one or more grid cells.
Step-by-Step Guide
- Setting Up the Grid Container
To create a grid layout, you first need to define a grid container. This is done by applying display: grid to a container element.
<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>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.grid-item {
background-color: #8ca0ff;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}Explanation
display: grid;: Defines the container as a grid.grid-template-columns: repeat(2, 1fr);: Creates two columns of equal width.grid-template-rows: repeat(2, 100px);: Creates two rows, each 100px tall.gap: 10px;: Sets a 10px gap between grid items.
- Positioning Grid Items
You can position grid items within the grid using properties like grid-column and grid-row.
<div class="grid-container"> <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1;">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.grid-item {
background-color: #8ca0ff;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}Explanation
grid-column: 1 / 3;: The item spans from the first to the third column line.grid-row: 1;: The item is placed in the first row.
- Creating Complex Layouts
You can create more complex layouts by combining grid properties.
<div class="grid-container"> <div class="grid-item" style="grid-area: header;">Header</div> <div class="grid-item" style="grid-area: sidebar;">Sidebar</div> <div class="grid-item" style="grid-area: main;">Main Content</div> <div class="grid-item" style="grid-area: footer;">Footer</div> </div>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 10px;
}
.grid-item {
background-color: #8ca0ff;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.grid-item[style*="header"] {
grid-area: header;
}
.grid-item[style*="sidebar"] {
grid-area: sidebar;
}
.grid-item[style*="main"] {
grid-area: main;
}
.grid-item[style*="footer"] {
grid-area: footer;
}Explanation
grid-template-areas: Defines named grid areas.grid-area: Assigns grid items to the named areas.
Practical Exercise
Task
Create a grid layout with the following structure:
- A header spanning the full width.
- A sidebar on the left.
- A main content area on the right.
- A footer spanning the full width.
Solution
<div class="grid-container"> <div class="grid-item" style="grid-area: header;">Header</div> <div class="grid-item" style="grid-area: sidebar;">Sidebar</div> <div class="grid-item" style="grid-area: main;">Main Content</div> <div class="grid-item" style="grid-area: footer;">Footer</div> </div>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 10px;
}
.grid-item {
background-color: #8ca0ff;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.grid-item[style*="header"] {
grid-area: header;
}
.grid-item[style*="sidebar"] {
grid-area: sidebar;
}
.grid-item[style*="main"] {
grid-area: main;
}
.grid-item[style*="footer"] {
grid-area: footer;
}Common Mistakes
- Not defining the grid container: Ensure you apply
display: gridto the container element. - Incorrect grid area names: Make sure the names used in
grid-template-areasmatch those ingrid-area.
Conclusion
In this lesson, we covered how to create layouts using CSS Grid. We learned how to define a grid container, position grid items, and create complex layouts. Practice these concepts to become proficient in creating responsive and flexible grid layouts. In the next lesson, we will explore responsive design with CSS Grid.
CSS Mastery: From Beginner to Advanced
Module 1: Introduction to CSS
- What is CSS?
- CSS Syntax and Selectors
- How to Add CSS to HTML
- Basic CSS Properties
- CSS Colors
- CSS Units and Measurements
Module 2: Text and Font Styling
- Text Properties
- Font Properties
- Google Fonts Integration
- Text Alignment and Spacing
- Text Decoration and Transformation
Module 3: Box Model and Layout
- Understanding the Box Model
- Margin and Padding
- Border and Outline
- Width and Height
- Box Sizing
- CSS Display Property
Module 4: Positioning and Floating
- CSS Position Property
- Static, Relative, Absolute, and Fixed Positioning
- CSS Float and Clear
- Creating Layouts with Float
- CSS Z-Index
Module 5: Flexbox
- Introduction to Flexbox
- Flex Container Properties
- Flex Item Properties
- Creating Layouts with Flexbox
- Responsive Design with Flexbox
Module 6: CSS Grid
- Introduction to CSS Grid
- Grid Container Properties
- Grid Item Properties
- Creating Layouts with CSS Grid
- Responsive Design with CSS Grid
Module 7: Advanced CSS Techniques
Module 8: Responsive Design
- Introduction to Responsive Design
- Media Queries
- Responsive Typography
- Responsive Images
- Mobile-First Design
Module 9: Preprocessors and Frameworks
- Introduction to CSS Preprocessors
- Sass Basics
- Less Basics
- Introduction to CSS Frameworks
- Using Bootstrap