CSS Grid

What is CSS Grid?

CSS Grid is a two-dimensional layout system used to create rows and columns on a webpage. It makes it easy to build responsive layouts by placing elements in a grid structure. Unlike Flexbox, which arranges items in one direction (row or column), CSS Grid controls both rows and columns at the same time.

Why Use CSS Grid?

CSS Grid simplifies complex webpage layouts without using floats or positioning. It allows you to create responsive page structures, dashboards, galleries, cards, and other layouts with clean and readable CSS code.

Basic Grid Syntax

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:grid;
}

</style>
</head>

<body>

<div class="container">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>

</div>

</body>
</html>

Step 1: Create a Grid Container

Add display:grid; to the parent element. Then use the grid-template-columns property to define how many columns your grid should have.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.item{
    background:#007BFF;
    color:white;
    padding:20px;
    text-align:center;
    border-radius:5px;
}

</style>
</head>

<body>

<div class="container">

    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>

</div>

</body>
</html>

Step 2: Change the Number of Columns

The grid-template-columns property controls how many columns appear in the grid. Change the number of values to create different layouts.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.item{
    background:#28a745;
    color:white;
    padding:25px;
    text-align:center;
}

</style>
</head>

<body>

<div class="container">

    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>

</div>

</body>
</html>

Common CSS Grid Properties

CSS Grid provides many useful properties for creating flexible layouts. The following example demonstrates some of the most commonly used Grid properties.

<!DOCTYPE html>
<html>
<head>
<style>

.container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    padding:10px;
}

.item{
    background:#ff9800;
    color:white;
    padding:25px;
    text-align:center;
    border-radius:6px;
}

.wide{
    grid-column:span 2;
}

.tall{
    grid-row:span 2;
}

</style>
</head>

<body>

<div class="container">

    <div class="item wide">Wide</div>
    <div class="item">2</div>
    <div class="item tall">Tall</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>

</div>

</body>
</html>

Complete CSS Grid Example

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-family:Arial,sans-serif;
    background:#f5f9ff;
    margin:20px;
}

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

.card{
    background:white;
    border:1px solid #ddd;
    border-radius:8px;
    padding:20px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.card h3{
    color:#0056b3;
}

button{
    background:#007BFF;
    color:white;
    border:none;
    padding:10px 18px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#0056b3;
}

</style>
</head>

<body>

<div class="grid">

    <div class="card">
        <h3>HTML</h3>
        <p>Learn HTML Basics</p>
        <button>Read More</button>
    </div>

    <div class="card">
        <h3>CSS</h3>
        <p>Learn CSS Styling</p>
        <button>Read More</button>
    </div>

    <div class="card">
        <h3>JavaScript</h3>
        <p>Build Interactive Websites</p>
        <button>Read More</button>
    </div>

    <div class="card">
        <h3>React</h3>
        <p>Create Modern Web Apps</p>
        <button>Read More</button>
    </div>

</div>

</body>
</html>

Advantages of CSS Grid

Two-Dimensional Layout

Flexible Design

Controls rows and columns at the same time.

Responsive Layout

Mobile Friendly

Creates responsive layouts with less code.

Easy Positioning

Better Control

Place items exactly where you want them.

Cleaner Code

Easy Maintenance

Reduces the need for floats and complex positioning.

Powerful Layouts

Professional Design

Perfect for dashboards, galleries, and web page layouts.

Common Mistakes

Beginners often forget to add display:grid, define grid-template-columns, or confuse Grid with Flexbox. They may also use fixed column widths that don’t work well on smaller screens instead of responsive units like fr.

<!DOCTYPE html>
<html>
<head>
<style>

/* Incorrect */

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

/* Correct */

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
}

</style>
</head>

<body>

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

</body>
</html>

Best Practices

Always set display:grid on the parent container.
Use gap instead of margins to create spacing between grid items.
Use the fr unit for flexible column widths.
Prefer repeat() to avoid repeating the same values.
Use auto-fit or auto-fill for responsive grids.
Use CSS Grid for two-dimensional layouts.
Use Flexbox for one-dimensional layouts inside Grid items.
Test your grid layout on different screen sizes.

Web Resources on CSS Grid

1. MDN Web Docs : CSS grid layout
2. CSS Tricks.com : A Complete CSS Grid Layout Guide
3. Web.dev : Grid
4. Web Kit.org : Introducing CSS Grid Lanes

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.