CSS Grid

CSS Grid is a layout module that makes it easy to design responsive web pages. Unlike Flexbox, which works in one direction, Grid works in both rows and columns.

Advantages of CSS Grid

• Create two-dimensional layouts.
• Easy row and column management.
• Responsive web design.
• Less CSS code for complex layouts.
• Precise control over element placement.

.container{

    display:grid;

}

To create a Grid layout, apply display:grid; to the parent element. All direct child elements become grid items.

.container{

    display:grid;

}

The grid-template-columns property defines the number and width of columns in a Grid container.

.container{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

}

The grid-template-rows property defines the height and number of rows in a Grid layout.

.container{

    display:grid;

    grid-template-rows:100px 200px;

}

The gap property adds spacing between rows and columns without using margins.

.container{

    display:grid;

    gap:20px;

}

.gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

}

Every direct child of a Grid container is called a Grid Item. Grid items can be positioned anywhere inside the grid.

    
Item 1

    
Item 2

    
Item 3

.container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

}

The grid-column and grid-row properties allow an item to span across multiple columns or rows.

.item{

    grid-column:1 / 3;

    grid-row:1 / 2;

}

The grid-area property assigns a name to a grid item so it can be placed easily inside a layout.

.header{

    grid-area:header;

}

.container{

    display:grid;

    grid-template-areas:

    "header header"

    "menu content"

    "footer footer";

}

Example 1: Three Column Layout

.container{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:20px;

}

Example 2: Responsive Gallery

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:15px;

}

Example 3: Website Layout

.container{

    display:grid;

    grid-template-areas:

    "header header"

    "sidebar content"

    "footer footer";

}

.container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

CSS Grid is a powerful layout system. Following best practices helps create clean, responsive, and maintainable webpages.

• Use Grid for two-dimensional layouts.
• Use repeat() to reduce repetitive code.
• Use the fr unit for flexible columns.
• Use gap instead of margins for spacing.
• Use grid-template-areas for readable layouts.
• Combine Grid with media queries for responsiveness.
• Keep layouts simple and organized.
• Test your layout on different screen sizes.

❌ Incorrect

.container{

    grid-template-columns:1fr 1fr;

}

✔ Correct

.container{

    display:grid;

    grid-template-columns:1fr 1fr;

}

CSS Grid is supported by all modern web browsers and is widely used for responsive website layouts.

1. What is CSS Grid?
2. What is the purpose of display:grid;?
3. What is the difference between Grid and Flexbox?
4. What does grid-template-columns do?
5. What does the fr unit represent?
6. What is the purpose of the gap property?
7. What is grid-column used for?
8. What is grid-row used for?
9. What are grid-template-areas?
10. When should you use CSS Grid?

In this lesson, you learned:

• ✔ Introduction to CSS Grid.
• ✔ display:grid.
• ✔ grid-template-columns.
• ✔ grid-template-rows.
• ✔ gap.
• ✔ Grid Items.
• ✔ grid-column and grid-row.
• ✔ grid-area.
• ✔ Practical Grid examples.
• ✔ Best practices and common mistakes.