Everything You Need To Know About CSS Grid Layout

CSS Grid Layout is a powerful tool for creating complex, responsive layouts across different screen sizes. It enables you to align and organize content into rows and columns, making it ideal for building flexible layouts with minimal code. This guide covers all the essentials, from the core concepts of CSS Grid to practical examples of properties and values.

📌 Table of Contents

What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS that allows developers to define rows and columns in which to place elements. This layout model gives you a structured approach to organizing content, making it easier to achieve complex layouts with simpler code.

Key Grid Terminologies

Before we get into coding, let’s go over a few important concepts:

1. Grid Container: The parent element with display: grid;, turning it into a grid container.
2. Grid Item: Any direct child of the grid container.
3. Grid Line: Lines that divide rows and columns.
4. Grid Track: The space between two adjacent grid lines, which can be a row or column.

Properties for Grid Containers

To work effectively with CSS Grid, you need to understand the properties you can apply to the grid container:

display: grid;

This property turns any block-level container into a grid container, enabling all its child elements to become grid items.

.container {
  display: grid;
}

grid-template-columns

Defines the number and width of columns in your grid. You can use different units like px, %, fr (fractional units), or auto.

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

grid-template-rows

Similar to columns, this property defines the height of rows.

.container {
  display: grid;
  grid-template-rows: 100px auto 1fr;
}

gap, column-gap, row-gap

These properties specify the space between grid items.

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

Properties for Grid Items

Now, let’s look at properties specifically for grid items, which allow you to control the positioning and alignment within the grid.

grid-column

This property defines where an item starts and ends within the column tracks.

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

grid-row

Similar to grid-column, but for rows. It specifies the row-start and row-end positions for an item.

.item {
  grid-row: 2 / span 2;
}

justify-self and align-self

These properties control how a grid item aligns within its grid cell, either horizontally or vertically.

.item {
  justify-self: center;
  align-self: end;
}

Useful Functions

CSS Grid includes powerful functions for dynamic layouts:

repeat()

Automate repetitive tracks. repeat() takes two arguments: the number of times to repeat and the track size.

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

minmax()

Define minimum and maximum size limits for grid tracks.

.container {
  grid-template-columns: minmax(150px, 1fr);
}

fit-content()

Limits the track size based on the content.

.container {
  grid-template-columns: fit-content(200px);
}

Conclusion

CSS Grid provides a modern, versatile layout solution that can transform your approach to web design. By understanding the fundamental concepts, properties, and functions of CSS Grid, you can create complex, responsive layouts with less code. This guide covered everything from basic properties to advanced functions, giving you the knowledge to get started on your CSS Grid journey.

That's all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 32131! 🤗