Chapter 7: CSS Grid
7.1 Introduction to CSS Grid
CSS Grid Layout is a two-dimensional system for web design. Unlike Flexbox, which handles one dimension (row or column), Grid allows for layouts with both rows and columns, making it ideal for complex designs.
7.2 Key Properties of CSS Grid
- display: Turns an element into a grid container. Use
display: grid;. - grid-template-columns: Defines the columns in the grid.
- grid-template-rows: Defines the rows in the grid.
- gap: Sets the spacing between rows and columns.
- grid-column / grid-row: Specifies the start and end points of grid items.
7.3 Example: Basic Grid Layout
Below is a simple example of a grid layout with three columns and two rows:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
background-color: #f8f9fa;
padding: 10px;
}
.grid-item {
background-color: #007bff;
color: white;
text-align: center;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<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>
</body>
</html>
7.4 Explanation of the Code
In the example above:
display: grid;defines the grid container.grid-template-columns: 1fr 1fr 1fr;creates three equal columns.gap: 10px;adds spacing between grid items..grid-itemstyles individual grid elements for visual appeal.
7.5 Practical Example: Responsive Photo Gallery
CSS Grid is perfect for creating a photo gallery layout:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.gallery-item {
background-color: #007bff;
color: white;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">1</div>
<div class="gallery-item">2</div>
<div class="gallery-item">3</div>
<div class="gallery-item">4</div>
<div class="gallery-item">5</div>
<div class="gallery-item">6</div>
</div>
</body>
</html>
7.6 Summary
CSS Grid is a powerful layout system that allows developers to create responsive and complex designs effortlessly. In this chapter, you learned about grid properties, a basic layout, and a responsive gallery example. Stay tuned for Chapter 8, where we’ll explore advanced responsive design techniques.
){kind=link}
0 Comments