CSS Grid is a modern layout system that enables developers to create structured, responsive, and flexible webpage layouts with ease. Unlike older layout techniques that relied on floats or complicated positioning, CSS Grid provides a powerful two-dimensional system capable of arranging content into rows and columns simultaneously.
Modern websites often contain multiple sections such as headers, sidebars, navigation menus, content areas, galleries, and footers. CSS Grid makes it easy to organize these sections in a clean and efficient manner while keeping the HTML simple and easy to maintain.
One of the biggest strengths of CSS Grid is its ability to create complex webpage layouts without requiring excessive CSS code. Developers can precisely control the placement, size, and spacing of every element while maintaining responsive behavior across different devices.
In this tutorial, you will learn the fundamental concepts of CSS Grid, understand how Grid Containers and Grid Items work, and explore practical examples that help you design professional responsive websites.
CSS Grid is a two-dimensional layout model that allows developers to arrange webpage elements in both horizontal and vertical directions. Unlike Flexbox, which mainly works in one direction at a time, Grid manages rows and columns together, making it ideal for designing complete webpage structures.
A Grid layout consists of a parent element known as the Grid Container and one or more child elements known as Grid Items. The container defines the grid structure, while the items are automatically positioned within that structure.
CSS Grid simplifies the creation of responsive layouts by allowing developers to define rows, columns, spacing, and alignment using only a few CSS properties.
Before CSS Grid, developers commonly used floats, tables, and complex positioning techniques to build webpage layouts. These methods required additional code and often produced alignment issues on different screen sizes.
CSS Grid solves these challenges by providing a dedicated layout system that offers complete control over rows and columns. It helps developers build responsive interfaces faster while reducing unnecessary CSS.
A Grid Container is the parent HTML element that holds all Grid Items. To activate the Grid Layout system, the parent element must use the CSS property display: grid;.
Once an element becomes a Grid Container, all of its direct child elements automatically become Grid Items and follow the layout rules defined for the grid.
.container{
display:grid;
}
<div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
The parent element becomes the Grid Container, while all three child elements become Grid Items.
Grid Items are the direct child elements placed inside a Grid Container. Each Grid Item occupies one or more cells within the grid depending on the layout rules defined by the developer.
Grid Items can span multiple rows or columns, making it possible to create complex webpage layouts with minimal CSS.
<div class="container"> <div>Header</div> <div>Sidebar</div> <div>Content</div> <div>Footer</div> </div>
Each child element becomes a Grid Item that can be positioned independently within the grid.
A CSS Grid is built using horizontal rows and vertical columns. Their intersection forms individual grid cells where Grid Items are placed.
Developers can define any number of rows and columns to create layouts ranging from simple two-column pages to advanced dashboard interfaces.
+---------+---------+---------+ | Cell 1 | Cell 2 | Cell 3 | +---------+---------+---------+ | Cell 4 | Cell 5 | Cell 6 | +---------+---------+---------+ | Cell 7 | Cell 8 | Cell 9 | +---------+---------+---------+
Each rectangle in the diagram represents an individual grid cell where one or more Grid Items can be placed.
The display: grid; property transforms a normal HTML container into a Grid Container. This single declaration activates all Grid Layout features, allowing rows, columns, spacing, and positioning to be controlled through CSS.
.container{
display:grid;
background:#f4f8ff;
padding:20px;
}
Without this property, Grid-specific CSS rules will not take effect because the browser treats the container as a normal block-level element.
The following example demonstrates a simple Grid layout consisting of three equal columns.
<div class="container"> <div>HTML</div> <div>CSS</div> <div>JavaScript</div> </div>
.container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:20px;
}
.container div{
padding:20px;
background:#eaf4ff;
border:1px solid #0066cc;
text-align:center;
}
In this example, the Grid Container creates three equal-width columns. Each Grid Item is automatically placed into one column, while the gap property provides equal spacing between the items. This approach is widely used for creating responsive cards, service sections, feature lists, and product galleries.
The grid-template-columns property defines the number and width of columns inside a Grid Container. It is one of the most frequently used CSS Grid properties because it controls the horizontal structure of the layout.
Each value represents the width of a column. Developers can use fixed units such as pixels, flexible units like fr, percentages, or functions such as repeat() to create responsive layouts.
.container{
grid-template-columns:value;
}
.container{
display:grid;
grid-template-columns:200px 200px 200px;
}
The above example creates three columns, each having a width of 200 pixels.
.container{
display:grid;
grid-template-columns:1fr 2fr 1fr;
}
The second column receives twice as much available space as the first and third columns.
The grid-template-rows property specifies the height of rows inside a Grid Container. Each value represents the height of an individual row.
This property is useful when building dashboards, image galleries, forms, and webpage sections that require rows of different heights.
.container{
grid-template-rows:value;
}
.container{
display:grid;
grid-template-rows:120px 200px 150px;
}
The Grid Container now contains three rows with different heights.
The gap property creates spacing between rows and columns without using margins. It keeps layouts clean and consistent while reducing unnecessary CSS code.
The gap property works for both CSS Grid and CSS Flexbox.
.container{
gap:20px;
}
.container{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:25px;
}
Every Grid Item will have a 25-pixel gap from its neighboring items.
The grid-column property allows a Grid Item to span multiple columns. It gives developers complete control over the horizontal placement of items inside the grid.
.item{
grid-column:start / end;
}
.item1{
grid-column:1 / 3;
}
The first Grid Item starts at column line 1 and ends at column line 3, covering two columns.
The grid-row property determines how many rows a Grid Item occupies. It allows developers to create taller sections such as sidebars, advertisements, or feature panels.
.item{
grid-row:start / end;
}
.item2{
grid-row:1 / 3;
}
The Grid Item spans from the first row line to the third row line, occupying two rows.
The grid-template-areas property allows developers to assign meaningful names to different sections of a webpage. Instead of remembering row and column numbers, developers can arrange layouts using descriptive names.
This approach improves readability and makes large layouts easier to understand.
.container{
display:grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
Each named area can then be assigned to individual Grid Items using the grid-area property.
The grid-area property assigns a Grid Item to one of the named areas defined using grid-template-areas.
.header{
grid-area:header;
}
.sidebar{
grid-area:sidebar;
}
.content{
grid-area:content;
}
.footer{
grid-area:footer;
}
This method creates clean, readable layouts without relying on numerical row and column positions.
The justify-items property aligns Grid Items horizontally inside their individual grid cells. It affects every Grid Item within the Grid Container.
| Value | Description |
|---|---|
| start | Aligns items to the beginning. |
| end | Aligns items to the end. |
| center | Centers items horizontally. |
| stretch | Default value. Items stretch to fill the available width. |
.container{
display:grid;
justify-items:center;
}
The align-items property aligns Grid Items vertically within their grid cells. It works together with justify-items to control the overall positioning of content.
.container{
display:grid;
height:350px;
align-items:center;
}
Every Grid Item is vertically centered inside its own grid cell.
The following example creates a responsive three-column layout using several Grid properties together.
<div class="container"> <div>HTML</div> <div>CSS</div> <div>JavaScript</div> <div>Bootstrap</div> <div>React</div> <div>PHP</div> </div>
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
justify-items:center;
align-items:center;
padding:20px;
}
.container div{
background:#edf6ff;
padding:20px;
border:1px solid #0066cc;
width:100%;
text-align:center;
}
This layout automatically creates three equal-width columns with consistent spacing between each Grid Item. The content is centered inside every cell, producing a clean and responsive design suitable for feature sections, service cards, product listings, dashboards, and portfolio pages.
The justify-content property controls the alignment of the entire grid along the horizontal (inline) axis when there is extra space inside the Grid Container. It does not align individual Grid Items; instead, it controls how the complete grid is positioned within the container.
| Value | Description |
|---|---|
| start | Places the grid at the beginning of the container. |
| end | Places the grid at the end of the container. |
| center | Centers the entire grid. |
| space-between | Creates equal space between columns. |
| space-around | Adds equal space around every column. |
| space-evenly | Distributes equal spacing throughout the grid. |
.container{
display:grid;
grid-template-columns:150px 150px;
justify-content:center;
}
The align-content property aligns the complete grid vertically whenever the Grid Container has additional height. It is useful when the grid occupies less space than the container itself.
.container{
display:grid;
height:500px;
grid-template-columns:1fr 1fr;
align-content:center;
}
This property controls the position of all rows together rather than individual Grid Items.
The place-items property is a shorthand for combining the align-items and justify-items properties. It allows developers to center or position Grid Items using a single CSS declaration.
.container{
place-items:center;
}
.container{
justify-items:center;
align-items:center;
}
Using place-items makes the stylesheet shorter and easier to maintain.
The place-content property combines the functionality of justify-content and align-content. It controls the positioning of the complete grid in both horizontal and vertical directions.
.container{
display:grid;
height:500px;
place-content:center;
}
This property is commonly used when centering complete Grid layouts inside large containers.
The auto-fit keyword automatically adjusts the number of columns according to the available screen width. It creates responsive layouts without requiring multiple media queries.
.container{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
As the screen size changes, Grid Items automatically move to new rows while maintaining a minimum width of 220 pixels.
The auto-fill keyword works similarly to auto-fit, but it preserves empty grid tracks if extra space is available. It is useful when developers want to maintain a fixed grid structure even if some cells remain empty.
.container{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(180px,1fr));
}
This approach is frequently used in image galleries and product listing pages.
The minmax() function defines the minimum and maximum size of a grid track. It creates flexible layouts that adapt smoothly to different screen sizes while preventing Grid Items from becoming too small.
minmax(minimum,maximum)
.container{
display:grid;
grid-template-columns:
repeat(3,minmax(200px,1fr));
}
Each column remains at least 200 pixels wide but can grow to occupy additional available space.
CSS Grid is a two-dimensional layout system that arranges webpage elements using rows and columns.
Flexbox is designed for one-dimensional layouts, whereas CSS Grid manages both rows and columns simultaneously, making it suitable for complete webpage layouts.
The display:grid; property converts a normal HTML element into a Grid Container.
It creates consistent spacing between Grid rows and columns without using margins.
It automatically adjusts the number of columns according to the available screen width, helping create responsive layouts with minimal code.
CSS Grid is one of the most powerful layout systems available in modern web development. It allows developers to create organized, flexible, and responsive webpage layouts using rows and columns while keeping the HTML structure simple. Properties such as grid-template-columns, grid-template-rows, gap, grid-area, and minmax() provide precise control over layout design.
By mastering CSS Grid, developers can efficiently build dashboards, image galleries, landing pages, portfolios, and complete website layouts that adapt seamlessly to different screen sizes. Combined with Flexbox, CSS Grid forms the foundation of modern responsive web design and is an essential skill for every frontend developer.