-
Hajipur, Bihar, 844101
Grid Item
In CSS Grid, a grid item is any direct child of a grid container. While the grid container defines the layout structure through rows and columns, grid items are the elements that occupy these spaces. Grid items can be placed automatically or explicitly positioned, and they can span multiple rows and columns, align themselves within their cells, and respond to the container’s responsive behavior.
In this chapter, you will learn what a grid item is, why it is important, core properties, practical examples, advanced positioning techniques, accessibility considerations, common mistakes, best practices, and real-world applications.
What Is a Grid Item
A grid item is any element directly inside a grid container. Once an element becomes a grid item, it can leverage CSS Grid properties to control:
-
Placement – which row and column it occupies
-
Span – how many rows or columns it covers
-
Alignment – its position inside the grid cell
HTML structure for grid items:
<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>
Here, each <div> with class grid-item automatically becomes a grid item and follows the container’s grid structure. By default, items are placed in row-major order (row by row), but this can be modified with grid item properties.
Why Grid Items Are Important
Grid items are essential because:
-
They populate the layout defined by the grid container.
-
They can span multiple rows or columns, allowing flexible and complex designs.
-
Individual alignment of items enhances visual presentation.
-
Proper placement improves readability and user experience.
-
Grid items, combined with responsive properties, make layouts adaptable to different screen sizes.
Without understanding grid items, developers cannot fully utilize the flexibility and precision that CSS Grid provides.
Core Grid Item Properties
grid-column and grid-row
Define the starting and ending lines for a grid item or how many columns or rows it should span.
.grid-item:first-child {
grid-column: 1 / 3; /* Span from column 1 to column 3 */
grid-row: 1 / 2; /* Span only the first row */
}
Shortcut for spanning:
.grid-item:first-child {
grid-column: span 2; /* Span 2 columns */
grid-row: span 2; /* Span 2 rows */
}
justify-self and align-self
Control the alignment of a single grid item inside its cell.
.grid-item {
justify-self: end; /* Align item to the right horizontally */
align-self: start; /* Align item to the top vertically */
}
Values for both properties include: start, end, center, and stretch.
place-self
A shorthand property combining justify-self and align-self.
.grid-item {
place-self: center start; /* Horizontally center, vertically start */
}
order (optional)
Grid items also support the order property from Flexbox to change the visual order without changing the HTML.
.grid-item:first-child {
order: 2; /* Moves this item after others visually */
}
Practical Examples of Grid Items
Spanning Multiple Columns
.grid-item:first-child {
grid-column: span 2; /* Covers two columns */
background-color: #007BFF;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
This technique is useful for headers, banners, or featured content.
Individual Item Alignment
.grid-item:nth-child(2) {
justify-self: start;
align-self: end;
background-color: #f0f0f0;
padding: 20px;
}
Each item can have unique alignment within its grid cell without affecting others.
Combining Span and Alignment
.grid-item:nth-child(3) {
grid-column: 2 / 4; /* Span from column 2 to 4 */
grid-row: 1 / 3; /* Span two rows */
place-self: center; /* Center both horizontally and vertically */
}
This creates visually interesting layouts where key content is emphasized.
Advanced Grid Item Techniques
-
Auto-placement vs explicit placement: By default, items are auto-placed in order. You can manually assign each item to a specific cell for precision layouts.
-
Responsive spanning: Use
minmax()and media queries to change item span on smaller screens. -
Overlapping items: Grid allows items to occupy the same grid cell to create overlays or layered effects.
.grid-item:nth-child(4) {
grid-column: 2 / 3;
grid-row: 1 / 2;
z-index: 2; /* Place above other items */
}
Accessibility Considerations
-
Ensure reading order is logical, especially when items span multiple rows or columns.
-
Keep interactive elements within grid items keyboard-accessible.
-
Avoid using overlapping items in a way that hides important content.
-
Maintain sufficient spacing between items for touch accessibility.
Proper attention to accessibility ensures that visually complex grids are still usable for all users.
Common Mistakes
-
Forgetting the difference between
justify-selfandjustify-items. -
Overlapping items without adjusting z-index or transparency.
-
Relying solely on grid placement for reading order, which can confuse screen readers.
-
Using fixed column spans without considering responsive layouts.
-
Ignoring alignment properties, causing inconsistent visual presentation.
Avoiding these mistakes ensures a grid that is both visually appealing and functionally usable.
Best Practices
-
Use
spanfor items that need to cover multiple columns or rows. -
Align individual items only when necessary; default
stretchworks well for most layouts. -
Test layout changes across different screen sizes for responsiveness.
-
Combine
place-selfwith flexible spans for clean and adaptive designs. -
Keep the HTML semantic; do not reorder content purely for visual design.
Real-World Applications
Grid items are used in:
-
Image galleries and portfolios
-
Featured content sections on homepages
-
Product cards in e-commerce sites
-
Dashboard widgets and panels
-
Pricing tables and multi-column forms
Mastering grid items allows developers to create precise, responsive, and visually balanced layouts where every element has purpose and flexibility.
Summary of Grid Item
A grid item is any direct child of a grid container. With properties like grid-column, grid-row, justify-self, align-self, and place-self, developers can control placement, span, and alignment of each item individually. Understanding grid items is essential to fully leverage CSS Grid’s two-dimensional layout system, enabling precise, responsive, and professional web designs.
Practice Questions
Q1. Span one item across 2 columns.
Q2. Span one item across 2 rows.
Q3. Place an item in row 2, column 3.
Q4. Center a specific item inside its cell.
Q5. Align an item to the bottom of its cell.
Q6. Use grid-column: 2 / span 2.
Q7. Name a grid area and assign an item to it.
Q8. Set different alignments for two items using justify-self.
Q9. Place a grid item at column 1, row 1 explicitly.
Q10. Make an item take full width but fixed height.
