-
Hajipur, Bihar, 844101
Grid Column/Rows
In CSS Grid, columns and rows are the foundation of the grid layout. They define the structure of the grid container and determine how grid items are arranged horizontally and vertically. Understanding how to control columns and rows is essential for creating organized and responsive layouts.
In this chapter, you will learn about grid columns and rows, their core properties, practical examples, accessibility considerations, common mistakes, best practices, and real-world applications.
What Are Grid Columns and Rows
A grid in CSS consists of intersecting columns (vertical tracks) and rows (horizontal tracks). When a container is set to display: grid, you can define the size, number, and behavior of these tracks using CSS properties. Grid items are then placed within this structure either automatically or explicitly.
HTML structure for grid columns and rows:
<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;
grid-template-columns: 100px 200px; /* Two columns with fixed widths */
grid-template-rows: 150px 150px; /* Two rows with fixed heights */
gap: 10px; /* Spacing between cells */
}
Here, the container has two columns and two rows, and each grid item is automatically placed into the cells.
Why Grid Columns and Rows Are Important
Columns and rows are critical because:
-
They define the grid’s structure and organization
-
Allow precise placement of grid items
-
Enable responsive layouts using flexible sizing units
-
Simplify alignment and spacing control
-
Make complex layouts easier to create and maintain
Proper use of columns and rows ensures layouts are structured, visually consistent, and adaptable.
Core Properties for Grid Columns and Rows
grid-template-columns and grid-template-rows
Define the number and size of columns and rows.
.grid-container {
grid-template-columns: 1fr 2fr 1fr; /* Three columns with flexible widths */
grid-template-rows: 100px 200px; /* Two rows with fixed heights */
}
Values can be:
-
Fixed units:
px,em,rem -
Fractional units:
fr(flexible portion of available space) -
Auto:
auto(size based on content) -
Repeat function:
repeat(3, 1fr)(three equal columns)
grid-auto-rows and grid-auto-columns
Set default size for rows or columns that are added automatically.
.grid-container {
grid-auto-rows: 150px; /* Any additional rows are 150px high */
grid-auto-columns: 200px; /* Any additional columns are 200px wide */
}
minmax()
Defines a size range for columns or rows.
.grid-template-columns: repeat(3, minmax(150px, 1fr));
Each column will be at least 150px but can grow to fill available space.
auto-fit and auto-fill
Automatically fill columns or rows based on available space.
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-
auto-fitcollapses empty tracks -
auto-fillkeeps empty tracks in the layout
Practical Examples of Grid Columns and Rows
Fixed Column and Row Grid
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px; /* Three fixed columns */
grid-template-rows: 100px 100px; /* Two fixed rows */
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
Flexible Column Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal flexible columns */
grid-auto-rows: 150px; /* Default row height */
gap: 20px;
}
Responsive Columns Using minmax and auto-fit
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
Grid items automatically adjust to fit available space, creating a responsive layout.
Accessibility Considerations
-
Maintain logical reading order when placing items across columns and rows
-
Avoid relying solely on visual positioning for important content
-
Ensure interactive items within cells are accessible via keyboard and screen readers
-
Keep sufficient spacing for touch targets on small screens
Proper accessibility ensures that a structured grid is usable for all users.
Common Mistakes
-
Using fixed widths without considering responsiveness
-
Forgetting
gapand manually adding margins for spacing -
Misunderstanding
auto-fitvsauto-fillbehavior -
Overcomplicating layouts with unnecessary nested grids
-
Ignoring content overflow within grid cells
Avoiding these mistakes keeps grid layouts simple, responsive, and maintainable.
Best Practices
-
Use flexible units like
frorminmax()for responsive design -
Combine
repeat()withauto-fitfor dynamic column layouts -
Use
gapfor consistent spacing instead of margins -
Test layouts across multiple screen sizes and devices
-
Maintain semantic HTML to preserve accessibility
Real-World Applications
Grid columns and rows are used in:
-
Image galleries and portfolios
-
Dashboards with multiple panels
-
Pricing tables and feature lists
-
News or blog grids
-
Forms and multi-column content layouts
Mastering columns and rows allows developers to create well-structured and responsive web layouts.
Summary of Grid Column/Rows
Grid columns and rows form the backbone of CSS Grid. Using properties like grid-template-columns, grid-template-rows, grid-auto-rows, minmax(), and repeat(), developers can define precise, flexible, and responsive layouts. Proper use of columns and rows ensures that grid items are organized, visually consistent, and adaptable across different screen sizes.
Practice Questions
Q1. Create a 3-column layout with equal width.
Q2. Create 2 rows with fixed height (100px each).
Q3. Make first column 1/3 and second 2/3 of the space.
Q4. Use repeat() to define 4 equal columns.
Q5. Create 2 columns with min width of 200px, responsive.
Q6. Set 3 rows with heights: 100px, auto, 50px.
Q7. Create a square grid of 3 rows × 3 columns.
Q8. Use grid-template shorthand for a 2x2 layout.
Q9. Add 20px gap between all rows and columns.
Q10. Combine fr and auto in row and column sizing.
