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.<\/p>\n\n\n\n
What is CSS Grid<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Why use CSS Grid<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Grid Container<\/p>\n\n\n\n
To start using CSS Grid you need to define a grid container. This is done by setting the display property to grid.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display grid
}<\/p>\n\n\n\n
Grid Items<\/p>\n\n\n\n
All direct children inside the grid container become grid items. These items can be placed anywhere inside the grid.<\/p>\n\n\n\n
Defining Columns<\/p>\n\n\n\n
You can define how many columns you want and their sizes using grid template columns.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display grid
grid template columns 1fr 1fr 1fr
}<\/p>\n\n\n\n
This creates three equal columns<\/p>\n\n\n\n
Defining Rows<\/p>\n\n\n\n
You can also define rows using grid template rows.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display grid
grid template rows 100px 200px
}<\/p>\n\n\n\n
Grid Gap<\/p>\n\n\n\n
Grid gap controls the space between rows and columns.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display grid
gap 10px
}<\/p>\n\n\n\n
Placing Items<\/p>\n\n\n\n
You can place items in specific positions using grid column and grid row.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.item1 {
grid column 1 span 2
}<\/p>\n\n\n\n
This means the item will take space across two columns<\/p>\n\n\n\n
Auto Layout<\/p>\n\n\n\n
CSS Grid can automatically adjust layout based on screen size using auto fit or auto fill.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display grid
grid template columns repeat auto fit minmax 200px 1fr
}<\/p>\n\n\n\n
Responsive Design<\/p>\n\n\n\n
CSS Grid makes it easy to create responsive layouts without using many media queries. It adjusts content based on available space.<\/p>\n\n\n\n
Conclusion<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/p>\n","protected":false},"menu_order":0,"template":"","class_list":["post-121","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n