CSS Grid Layout takes layout capabilities to the next level, offering a two-dimensional grid system that enables designers to create intricate and sophisticated page structures. With CSS Grid, you can easily define rows and columns, control the placement and size of grid items, and create responsive layouts without relying heavily on media queries.
CSS Grid introduces a grid-based layout system that consists of grid containers, grid tracks, and grid items. The grid containers serve as the parent elements that establish the grid context, while the grid tracks define the rows and columns of the grid. Grid items, on the other hand, are the child elements that are placed within the grid and take up the defined grid cells.
To create a grid layout, you need to define a grid container. This is done by setting the display property of the container element to grid. Let's take a look at an example:
<style>
.container {
display: grid;
}
</style>
<div class="container">
<!-- Grid items go here -->
</div>
In the above example, we have a div element with the class container. By setting its display property to grid, we create a grid container.
Grid tracks define the rows and columns of the grid. You can use different units of measurement, such as pixels, percentages, or fractions, to define the size of each track. Let's see an example:
<style>
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
</style>
<div class="container">
<!-- Grid items go here --%gt;
</div>
In this example, we have set the grid-template-rows property to define two rows, where the first row has a height of 100 pixels and the second row has a height of 200 pixels. Similarly, we have set the grid-template-columns property to define two columns, with the first column occupying one fraction of the available space and the second column occupying two fractions.
Grid items are the child elements that are placed within the grid and occupy the defined grid cells. You can use various properties to control the placement and size of grid items. Let's take a look at an example:
<style>
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
.item {
grid-row: 1 / 3;
grid-column: 2 / 3;
}
</style>
<div class="container">
<div class="item">Grid Item</div>
</div>
In this example, we have a grid container with two rows and two columns. The item class represents a grid item, which is positioned from the first row to the third row and from the second column to the third column. This allows the item to span across multiple grid cells.
CSS Grid provides various techniques for customizing the grid layout according to your design needs. Some of these techniques include:
Here's an example that demonstrates the usage of some of these properties:
<style>
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
justify-items: center;
align-items: center;
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: content;
}
.item-3 {
grid-area: sidebar;
}
.item-4 {
grid-area: footer;
justify-self: end;
}
</style>
<div class="container">
<div class="item item-1">Header</div>
<div class="item item-2">Content</div>
<div class="item item-3">Sidebar</div>
<div class="item item-4">Footer</div>
</div>
In this example, we have a grid container with four named grid areas: header, content, sidebar, and footer. Each grid item is assigned to its respective grid area using the grid-area property. The justify-self property is used to align the footer item to the end of its cell.
CSS Grid Layout provides a powerful and flexible system for creating complex and responsive page layouts. With its two-dimensional grid structure, designers can easily define rows and columns, control the placement and size of grid items, and create visually appealing designs without relying heavily on media queries.
In the next chapter, we will explore responsive web design with media queries, which allows us to create layouts that adapt to different screen sizes and devices. So, let's continue our journey and dive into the world of responsive web design!