-
Hajipur, Bihar, 844101
CSS Grid
CSS Grid is a powerful layout system that allows developers to create complex, two-dimensional web layouts with rows and columns. Unlike Flexbox, which is primarily one-dimensional (row or column), CSS Grid handles both dimensions simultaneously, making it ideal for designing grids, dashboards, galleries, and responsive layouts.
In this chapter, you will learn what CSS Grid is, why it is important, core properties, practical examples, accessibility considerations, common mistakes, best practices, and real-world applications.
What Is CSS Grid
CSS Grid enables you to define a container as a grid and divide it into rows and columns. The child elements of the grid container, known as grid items, can then be placed precisely within this structure. Grid offers control over alignment, spacing, and positioning, simplifying complex layouts that would otherwise require floats, positioning, or Flexbox hacks.
HTML structure for a grid container:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
.grid-container {
display: grid; /* Defines a grid container */
grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
gap: 20px; /* Spacing between grid items */
}
Here, .grid-item elements are automatically placed within the grid, and their size and position can be controlled using grid properties.
Why CSS Grid Is Important
CSS Grid is essential because:
-
It allows two-dimensional layout design (rows and columns)
-
Simplifies the creation of complex layouts without floats or positioning hacks
-
Provides responsive design features using fractional units and media queries
-
Offers precise control over alignment and spacing of items
-
Works well in combination with Flexbox for hybrid layouts
Grid reduces development time and improves maintainability for modern web layouts.
Core CSS Grid Properties
CSS Grid properties are divided into container properties and item properties.
Grid Container Properties
display: grid
Defines an element as a grid container.
.grid-container {
display: grid;
}
grid-template-columns and grid-template-rows
Define the size and number of columns and rows.
.grid-container {
grid-template-columns: 100px 200px;
grid-template-rows: 150px 150px;
}
You can also use flexible units:
.grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: 200px auto; /* Fixed row + auto-sized row */
gap (or grid-gap)
Sets spacing between rows and columns.
.grid-container {
gap: 20px;
}
justify-items and align-items
Control the alignment of grid items within their cells.
.grid-container {
justify-items: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
}
justify-content and align-content
Control the alignment of the entire grid within the container.
.grid-container {
justify-content: start; /* Align grid to the start horizontally */
align-content: space-between; /* Distribute grid rows vertically */
}
Grid Item Properties
grid-column and grid-row
Define where a grid item should be placed and how many tracks it should span.
.grid-item:first-child {
grid-column: 1 / 3; /* Span first two columns */
grid-row: 1 / 2; /* Span first row */
}
justify-self and align-self
Align individual grid items within their grid cells.
.grid-item {
justify-self: end; /* Align right */
align-self: start; /* Align top */
}
Practical Examples of CSS Grid
Simple 2x2 Grid
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 150px 150px;
gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
Responsive 3-Column Grid
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
Items automatically adjust to fit the available space while maintaining a minimum width.
Grid Item Spanning Multiple Columns
.grid-item:first-child {
grid-column: span 2; /* Span two columns */
}
This is useful for headers or featured content within the grid.
Accessibility Considerations
-
Ensure reading order matches visual order, especially when using grid spans or reordering items
-
Maintain focus visibility for interactive elements inside grid items
-
Avoid hiding content off-screen with negative margins or absolute positioning
-
Test keyboard navigation and screen readers on all grid layouts
Accessibility ensures all users can understand and interact with grid-based layouts effectively.
Common Mistakes
-
Forgetting to define
display: gridon the container -
Overcomplicating layouts with too many nested grids
-
Ignoring responsive design principles
-
Using fixed units instead of flexible units like
fr,%, orminmax() -
Misaligning items by misunderstanding
justify-itemsvs.justify-content
Avoiding these mistakes keeps your grid layouts maintainable and adaptive.
Best Practices
-
Use
repeat()andfrunits for flexible columns and rows -
Combine
auto-fitorauto-fillwithminmax()for responsive grids -
Use
gapinstead of margins for consistent spacing -
Keep nested grids minimal to reduce complexity
-
Test grids on multiple screen sizes for responsiveness
Real-World Applications
CSS Grid is widely used for:
-
Page layouts and sections
-
Image galleries and portfolios
-
Dashboards and analytics panels
-
Pricing tables and content cards
-
Complex forms and responsive layouts
Mastering CSS Grid allows developers to build precise, responsive, and professional layouts efficiently.
Summary of CSS Grid
CSS Grid is a two-dimensional layout system for creating rows and columns. With container properties like grid-template-columns, grid-template-rows, gap, justify-items, and align-items, and item properties like grid-column, grid-row, justify-self, and align-self, developers can create flexible, responsive, and visually consistent layouts. CSS Grid simplifies complex designs and is essential for modern web development.
Practice Questions
Q1. Create a 3-column grid with equal-width columns.
Q2. Add a 20px gap between grid items.
Q3. Make a grid layout with 2 fixed columns and 1 flexible column.
Q4. Create a responsive grid using auto-fit and minmax().
Q5. Span a grid item across 2 columns.
Q6. Position one grid item in row 2, column 3.
Q7. Create a 2x2 grid layout.
Q8. Center all grid items horizontally and vertically.
Q9. Add different row heights using grid-template-rows.
Q10. Use grid-area to name and place layout sections.
