Home 〉 CSS Tutorials 〉 CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples

CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples !

CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples !

Please Note :
  • This Tutorial is still not Completed.
  • We will be Completing it soon.

Need a powerful tool to build multi-column layouts? CSS Grid Layout lets you design complex layouts with rows and columns using simple properties like `grid-template-rows` and `grid-template-columns`. This tutorial walks you through auto-placement, grid areas, and responsive designs. It works well alongside Flexbox for modern layouts.

Introduction

CSS Grid is a powerful layout system in CSS that allows you to create responsive, structured, and complex web layouts easily. In our earlier post, we explained CSS Display Property in detail. Here, we will focus specifically on 'display: grid'.

What is CSS Grid?

CSS Grid is a 2-dimensional layout system, meaning you can control both rows and columns. It gives you full control over placement and spacing.

To activate grid, you set:

Example 📄

display: grid;

on a container.

Basic Example of CSS Grid

Code : 1 📝

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

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}

</style>
</head>
<body>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>

</body>
</html>

output 📌

1
2
3
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

  • 'display: grid' sets the element as a grid container.
  • 'grid-template-columns: auto auto auto' creates 3 equal-width columns.
  • 'gap: 10px' adds space between grid items.

CSS Grid Properties (with Examples)

1. 'grid-template-columns' and 'grid-template-rows'

Defines the number and size of columns and rows.

Example 📄

grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;

'fr' is a flexible unit. '1fr 2fr' means the second column is twice as wide.

2. 'grid-gap' or 'gap'

Adds spacing between columns and rows.

Example 📄

gap: 20px; /* or */
row-gap: 10px;
column-gap: 15px;

3. 'grid-column' and 'grid-row'

Controls item placement.

Example 📄

grid-column: 1 / 3; /* spans across column 1 to 2 */
grid-row: 1 / 2;

4. 'grid-area'

Used with named areas or shorthand placement.

When used with 'grid-template-areas'.

5. 'grid-template-areas'

Assign names to grid areas.

Example 📄

grid-area: header;
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
grid-template-columns: 1fr 3fr;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;

6. 'justify-items', 'align-items', 'place-items'

Aligns items inside grid cells.

Example 📄

justify-items: center;
align-items: center;

7. 'justify-content', 'align-content', 'place-content'

Aligns the whole grid inside the container.

Example 📄

justify-content: space-between;
align-content: center;

8. 'grid-auto-rows' and 'grid-auto-columns'

Sets size for automatically created rows or columns.

Example 📄

grid-auto-rows: 100px;

Responsive Grid with 'repeat()' and 'minmax()'

Example 📄

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

  • 'auto-fit' fills available space.
  • 'minmax()' ensures the column size adjusts between 150px and full width.

Conclusion

CSS Grid is a clean and modern way to build complex layouts without using floats or positioning. With the grid system, you can control alignment, spacing, and structure in a powerful and responsive way.

Take time to practice, and combine grid with media queries for a full responsive experience.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What is the difference between Flexbox and Grid?
  • Flexbox is one-dimensional (row or column).
  • Grid is two-dimensional (row 'and' column).
Can I use Grid with Flexbox?

Yes, you can use Grid for the main layout and Flexbox inside grid items for alignment.

Is CSS Grid supported in all browsers?

Yes, it is well supported in all modern browsers (Chrome, Firefox, Edge, Safari).

Previous Post Next Post