Learn CSS Basic to Advance in 7 Days
Introduction
Welcome to day four of your CSS learning journey. Today, we will dive into CSS Grid, a powerful two-dimensional layout system that allows you to create complex and responsive web layouts. CSS Grid simplifies the process of designing layouts by providing a grid-based structure, making it easy to align items in rows and columns.
What is CSS Grid?
CSS Grid Layout, or simply CSS Grid, is a layout system designed for the web. It allows you to design web pages using a grid structure, enabling you to place items into predefined rows and columns. CSS Grid provides a more intuitive and flexible way to create complex layouts compared to traditional methods like float and positioning.
The Grid Container
The first step in using CSS Grid is to define a grid container. The grid container is the parent element that holds the grid items. You can create a grid container by setting the display property to grid or inline-grid.
.grid-container {
display: grid; /* Creates a block-level grid container */
}
.inline-grid-container {
display: inline-grid; /* Creates an inline-level grid container */
}
Once you have a grid container, you can use various properties to define the structure of the grid.
Grid Items
Grid items are the children of a grid container. You can place grid items into specific rows and columns using properties like grid-column and grid-row. Here are some key properties for grid items:
Grid Template Columns and Rows
The grid-template-columns and grid-template-rows properties define the structure of the grid. You can specify the size of each column and row using various units like pixels, percentages, and the fr unit (fraction of available space).
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* Creates two columns, the second column is twice the size of the first */
grid-template-rows: 100px 200px; /* Creates two rows with fixed heights */
}
Grid Gap
The grid-gap property (or gap) defines the space between grid items. You can set both the row gap and column gap using this property.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px; /* Sets a 10px gap between all grid items */
}
Grid Column and Row
The grid-column and grid-row properties specify the start and end positions of grid items. You can use these properties to span items across multiple columns and rows.
.grid-item1 {
grid-column: 1 / 3; /* Spans the item from column 1 to column 3 */
grid-row: 1 / 2; /* Spans the item from row 1 to row 2 */
}
Advanced Grid Properties
Grid Area
The grid-area property allows you to name areas of the grid and place items into those areas. This property combines the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-template-areas:
"header header"
"sidebar content";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
Align Items and Justify Items
The align-items and justify-items properties align grid items along the row and column axis, respectively. They can have the following values:
start: Aligns items to the start of the container.end: Aligns items to the end of the container.center: Centers items within the container.stretch: Stretches items to fill the container (default foralign-items).
.grid-container {
display: grid;
align-items: center; /* Centers items along the row axis */
justify-items: center; /* Centers items along the column axis */
}
Align Content and Justify Content
The align-content and justify-content properties align the entire grid within the container. They can have the following values:
start: Aligns the grid to the start of the container.end: Aligns the grid to the end of the container.center: Centers the grid within the container.stretch: Stretches the grid to fill the container.space-between: Distributes space between grid lines.space-around: Distributes space around grid lines.space-evenly: Distributes space evenly between grid lines.
.grid-container {
display: grid;
align-content: space-between; /* Distributes space between grid lines along the row axis */
justify-content: space-around; /* Distributes space around grid lines along the column axis */
}
FAQ
What is CSS Grid?
CSS Grid is a layout system that allows you to design web pages using a grid structure, enabling you to place items into predefined rows and columns. It simplifies the process of creating complex and responsive layouts.
How do I create a grid container?
You can create a grid container by setting the display property to grid or inline-grid.
What are grid template columns and rows?
The grid-template-columns and grid-template-rows properties define the structure
of the grid. They specify the size of each column and row using various units like pixels, percentages, and the fr unit (fraction of available space).
How do I create gaps between grid items?
Use the grid-gap property (or gap) to define the space between grid items. You can set both the row gap and column gap using this property.
Can I place grid items into specific areas?
Yes, you can use the grid-area property to name areas of the grid and place items into those areas. This property combines the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
Conclusion
Today, you learned about CSS Grid, a powerful layout system for creating complex and responsive web layouts. We covered the basics of the grid container and grid items, as well as advanced properties like grid template columns and rows, grid gap, grid area, and more.
Understanding CSS Grid will significantly enhance your ability to create intricate and responsive layouts with ease. Keep practicing and experimenting with different CSS Grid properties to master this layout system.
Tomorrow, we will continue with more advanced CSS topics. Stay tuned and happy coding!