CSS Grid is a powerful layout system used to design web pages in a structured and flexible way. It allows you to create rows and columns easily and place content exactly where you want on the screen.
What is CSS Grid
CSS Grid is a two dimensional layout system. It works with both rows and columns at the same time. This makes it different from Flexbox which works mainly in one direction.
Why use CSS Grid
CSS Grid helps you build complex layouts with less code. It gives better control over spacing alignment and positioning. It is perfect for creating website layouts dashboards and galleries.
Grid Container
To start using CSS Grid you need to define a grid container. This is done by setting the display property to grid.
Example
.container {
display grid
}
Grid Items
All direct children inside the grid container become grid items. These items can be placed anywhere inside the grid.
Defining Columns
You can define how many columns you want and their sizes using grid template columns.
Example
.container {
display grid
grid template columns 1fr 1fr 1fr
}
This creates three equal columns
Defining Rows
You can also define rows using grid template rows.
Example
.container {
display grid
grid template rows 100px 200px
}
Grid Gap
Grid gap controls the space between rows and columns.
Example
.container {
display grid
gap 10px
}
Placing Items
You can place items in specific positions using grid column and grid row.
Example
.item1 {
grid column 1 span 2
}
This means the item will take space across two columns
Auto Layout
CSS Grid can automatically adjust layout based on screen size using auto fit or auto fill.
Example
.container {
display grid
grid template columns repeat auto fit minmax 200px 1fr
}
Responsive Design
CSS Grid makes it easy to create responsive layouts without using many media queries. It adjusts content based on available space.
Conclusion
CSS Grid is an essential skill for modern web design. By learning grid basics you can create clean flexible and professional layouts for any website.