CSS Grid is a powerful tool for creating complex and responsive web layouts with ease. In this comprehensive guide, we’ll explore the fundamentals of CSS Grid, break down the syntax, and provide detailed examples. Whether you’re a beginner or someone looking to refine your skills, this guide will equip you with everything you need to master CSS Grid.
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system for the web. It allows you to create grid-based designs directly in your CSS, giving you control over both rows and columns. Unlike Flexbox, which is primarily designed for one-dimensional layouts (either a row or a column), CSS Grid lets you work with both dimensions simultaneously.
CSS Grid Syntax and Theory
Basic Concepts
- Grid Container: The element on which
display: grid;is applied. It acts as the container for grid items. - Grid Items: The direct children of the grid container.
- Grid Lines: The dividing lines between grid cells, both horizontally and vertically.
- Grid Tracks: The space between two adjacent grid lines (can be rows or columns).
- Grid Cell: The smallest unit of the grid, defined by the intersection of grid lines.
- Grid Area: A rectangular space enclosed by four grid lines.
CSS Grid Syntax
To start using CSS Grid, you need to define a grid container:
.container {
display: grid; /* Turns the container into a grid layout */
grid-template-columns: 100px 200px 100px; /* Defines three columns with specified widths */
grid-template-rows: 50px 100px; /* Defines two rows with specified heights */
gap: 10px; /* Adds a 10px gap between the rows and columns */
}
In this example:
display: grid;activates the grid layout for the container.grid-template-columns: 100px 200px 100px;defines the widths of the three columns.grid-template-rows: 50px 100px;defines the heights of the two rows.gap: 10px;adds space between the grid cells.
Defining Rows and Columns
The most fundamental aspect of CSS Grid is defining rows and columns. This can be done using the grid-template-columns and grid-template-rows properties.
.container {
display: grid; /* Activates grid layout */
grid-template-columns: 1fr 2fr 1fr; /* Defines three columns with fractional units */
grid-template-rows: auto 100px; /* Defines two rows, one with auto height and one with fixed height */
}
1fr 2fr 1fr;creates three columns. The second column will take twice the space of the first and third columns.auto 100px;creates two rows. The first row adjusts based on its content, while the second row has a fixed height of 100px.
Placing Items on the Grid
You can control the placement of grid items using the grid-column and grid-row properties.
.item1 {
grid-column: 1 / 3; /* Spans item1 from column line 1 to 3 */
grid-row: 1 / 2; /* Places item1 in the first row */
}
grid-column: 1 / 3;makes the item span from the first to the third column.grid-row: 1 / 2;places the item in the first row.
Example: A Simple CSS Grid Layout
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
<style>
.container {
display: grid; /* Activates grid layout */
grid-template-columns: repeat(3, 1fr); /* Creates three equal columns */
grid-template-rows: repeat(2, 100px); /* Creates two rows, each 100px high */
gap: 10px; /* Adds a 10px gap between rows and columns */
}
.item1 {
grid-column: 1 / 3; /* Spans item1 across the first and second columns */
grid-row: 1; /* Places item1 in the first row */
}
.item2 {
grid-column: 3; /* Places item2 in the third column */
grid-row: 1 / 3; /* Spans item2 across the first and second rows */
}
.item3 {
grid-column: 1 / 3; /* Spans item3 across the first and second columns */
grid-row: 2; /* Places item3 in the second row */
}
</style>
In this example:
- The container has a grid with three columns and two rows.
Item 1spans the first and second columns in the first row.Item 2is placed in the third column, spanning both rows.Item 3spans the first and second columns in the second row.
Responsive Design with CSS Grid
CSS Grid is excellent for creating responsive layouts. You can use media queries to change the grid layout based on the screen size.
.container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 600px) {
.container {
grid-template-columns: repeat(3, 1fr); /* Creates three equal columns on screens wider than 600px */
}
}
In this code:
- On screens narrower than 600px, the container will have one column.
- On screens wider than 600px, the container will have three columns.
Grid Template Areas
CSS Grid also allows you to name grid areas, which can simplify placing items on the grid.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
This creates a grid layout with named areas, making it easier to visualize and manage.
Exercises
Exercise 1: Create a Simple Grid Layout
Task: Create a grid container with three columns and two rows. Place items as follows:
- Item 1 should span the first two columns in the first row.
- Item 2 should be in the third column, spanning both rows.
- Item 3 should be in the first two columns in the second row.
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
}
.item2 {
grid-column: 3;
grid-row: 1 / 3;
}
.item3 {
grid-column: 1 / 3;
grid-row: 2;
}
</style>
Answer: The code provided solves the exercise by creating the described grid layout.
Exercise 2: Create a Responsive Grid Layout
Task: Create a responsive grid layout that changes from a single-column layout on small screens to a three-column layout on larger screens.
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 600px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
Answer: The code adjusts the grid layout based on screen width, providing a responsive design.
Projects
Project 1: Build a Portfolio Layout
Task: Create a portfolio page with a header, a sidebar, a main content area, and a footer using CSS Grid.
<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>
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.header {
grid-area: header;
background-color: #f1f1f1;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
}
.main {
grid-area: main;
background-color: #e2e2e2;
}
.footer {
grid-area: footer;
background-color: #f1f1f1;
}
</style>
Answer: This project creates a portfolio layout using named grid areas for easy management.
Additional Projects Covering Previous Days
Additional Project 1: Responsive E-commerce Grid Layout
Task: Create a responsive e-commerce product grid that adjusts based on screen size, incorporating Flexbox for product item alignment and CSS Grid for layout.
<div class="container">
<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>
<div class="product">Product 4</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}
.product {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #e2e2e2;
}
</style>
Answer: This additional project combines CSS Grid for layout and Flexbox for content alignment, creating a responsive e-commerce product grid.
