CSS Grid Layout: Easy Tutorial for Beginners

CSS Grid is a powerful and simple way to create responsive layouts on your website. It helps you arrange items neatly in rows and columns without complex coding. This tutorial will help you understand and start using CSS Grid easily.

What is CSS Grid?

CSS Grid is a two-dimensional layout system, meaning it handles both rows and columns. It’s ideal for creating complex, structured designs with minimal effort.

How to Start Using CSS Grid

To use CSS Grid, start by setting display: grid; on the container.

Example:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 20px; /* Space between items */
}

Understanding Basic Grid Properties

1. `grid-template-columns`

Defines columns in your grid layout.

.container {
    grid-template-columns: 200px 1fr 100px;
}

This creates a grid with three columns: the first 200px wide, the second flexible, and the third 100px wide.

2. `grid-template-rows`

Defines the rows similarly to columns.

.container {
    grid-template-rows: 100px 150px;
}

3. `gap`

Adds space between grid items.

.container {
    gap: 15px; /* Equal spacing between rows and columns */
}

Placing Items on the Grid

You can control exactly where items go using these properties:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Example:

.item {
    grid-column-start: 1;
    grid-column-end: 3; /* Spans two columns */
    grid-row-start: 1;
    grid-row-end: 2;
}

You can simplify this as:

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

Aligning Items with CSS Grid

You can easily align grid items using:

justify-items (horizontal alignment)
align-items (vertical alignment)

Example:

.container {
    justify-items: center; /* horizontally centers items */
    align-items: center;   /* vertically centers items */
}

Responsive Grids with Auto-Fit and Auto-Fill

CSS Grid makes responsive layouts easy:

Example:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

This creates columns that automatically adjust based on screen size.

Practical Example: Simple CSS Grid Layout

HTML:

<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

CSS:

.grid {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #ccc;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ddd;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

.header {
    grid-area: header;
}

Conclusion

CSS Grid makes layout design simpler, cleaner, and highly responsive. Whether you’re building simple websites or complex layouts, CSS Grid is a powerful tool worth mastering.

Try these examples yourself and enjoy creating stunning web layouts!

Harshit Sharma

Harshit Sharma

CSS Grid Layout: Easy Tutorial for Beginners