CSS Grid (Advanced Layout System)
Introduction to CSS Grid
CSS Grid is a powerful layout system used to create complex and responsive web layouts. Unlike Flexbox, which works in one direction (row or column), CSS Grid works in two dimensions (rows and columns).
It allows you to design full-page layouts easily and is widely used in modern web designing.
Why Use CSS Grid
CSS Grid is important for building structured and professional layouts. It is especially useful when designing full web pages.
Key benefits of CSS Grid:
- Two-dimensional layout control
- Easy alignment of rows and columns
- Clean and organized design
- Better control over spacing
- Ideal for complex layouts
Grid Container and Grid Items
Grid Container
To start using Grid, you need to define a container using display: grid.
display: grid;
}
Grid Items
The child elements inside the container become grid items.
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Defining Rows and Columns
grid-template-columns
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This creates 3 equal columns.
grid-template-rows
grid-template-rows: 100px 200px;
}
Defines row heights.
Gap Between Grid Items
display: grid;
gap: 20px;
}
Adds space between rows and columns.
Placing Items in Grid
Grid Column Span
grid-column: span 2;
}
Grid Row Span
grid-row: span 2;
}
Complete CSS Grid Example
<div class=“box”>1</div>
<div class=“box”>2</div>
<div class=“box”>3</div>
<div class=“box”>4</div>
</div>
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.box {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
Difference Between Flexbox and Grid
Flexbox
- One-dimensional layout
- Best for alignment and small components
Grid
- Two-dimensional layout
- Best for full-page layouts
Both Flexbox and Grid are important and often used together in web designing.
Use Cases of CSS Grid
- Website layouts
- Image galleries
- Dashboard design
- Blog layouts
Best Practices for CSS Grid
- Use Grid for overall layout
- Combine Grid with Flexbox
- Keep layout simple and responsive
- Use
repeat()for cleaner code
How Browsers Support CSS Grid
Modern browsers like Google Chrome fully support CSS Grid, making it reliable for production use.
What You Will Learn Next
In the next lesson, you will learn about responsive web design and media queries, which help your website adapt to different screen sizes.
Click here for more free courses
FAQs
What is CSS Grid?
CSS Grid is a layout system used to create rows and columns for web design.
What is the difference between Grid and Flexbox?
Grid is two-dimensional, while Flexbox is one-dimensional.
Is CSS Grid responsive?
Yes, CSS Grid helps create responsive layouts when used properly.
Can we use Grid and Flexbox together?
Yes, both are often used together for better layout design.
Which browser supports CSS Grid?
All modern browsers like Google Chrome support CSS Grid.