Chapter 12: CSS Grid Layout
12.1 Introduction to CSS Grid Layout
CSS Grid Layout is a two-dimensional layout system for the web. It allows you to create complex layouts with rows and columns, making it easier to design responsive and dynamic web pages. Unlike Flexbox, which is one-dimensional (either row or column), Grid works in both dimensions simultaneously.
12.2 Grid Layout Syntax
To start using CSS Grid, you need to set the display property of a container to grid. This establishes the container as a grid, with rows and columns to hold grid items.
.container {
display: grid;
}
Next, you can define the number of rows and columns using the grid-template-rows and grid-template-columns properties.
12.3 Defining Rows and Columns
You can define specific sizes for the rows and columns of the grid. These can be set in pixels, percentages, or fractions of the available space.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 100px auto 200px; /* 3 rows with different heights */
}
This example creates a grid with three equal-width columns and three rows with different heights (100px, auto, and 200px).
12.4 Example: Basic Grid Layout
Here’s an example of a basic grid layout with three columns and two rows:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.box {
background-color: #007bff;
padding: 20px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
</body>
</html>
The grid in this example has three columns and two rows. The gap property adds spacing between the grid items.
12.5 Grid Item Placement
Grid items can be placed into specific rows and columns using grid-column and grid-row properties.
.item1 {
grid-column: 1 / 2; /* Item spans from column 1 to column 2 */
grid-row: 1 / 3; /* Item spans from row 1 to row 3 */
}
In this example, the item will occupy the first column and span across two rows.
12.6 Example: Grid Item Placement
In this example, we'll use grid-column and grid-row to place grid items into specific positions:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.box {
background-color: #007bff;
padding: 20px;
color: white;
text-align: center;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item2 {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<div class="container">
<div class="box item1">Box 1</div>
<div class="box item2">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
</body>
</html>
Here, item1 spans the first two columns and the first row, while item2 is placed in the last column and the second row.
12.7 Advanced Grid Features
CSS Grid offers additional features for creating more complex layouts, such as:
- grid-template-areas: Allows you to define grid layout using named areas.
- auto-fill and auto-fit: These functions let you automatically create columns based on the available space.
- minmax(): Allows you to set minimum and maximum size constraints for grid items.
12.8 Example: Grid Template Areas
In this example, we use grid-template-areas to define areas of the grid:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px 1fr 100px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
This layout uses named areas to define a typical web page structure with a header,
0 Comments