CSS Tutorial

CSS Grid Layout

CSS Grid Layout is a two-dimensional layout system for the web, allowing you to design web pages using rows and columns. It’s powerful and flexible, making it easy to create complex layouts.

📐 Syntax:

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

🧪 Live Example:

🔧 Common Properties:

• display: grid; → enables grid layout on the container
• grid-template-columns: → defines the number and size of columns
• grid-template-rows: → defines the number and size of rows
• grid-gap: → sets the gap between rows and columns
• grid-column: → defines the position of an item in the grid
• grid-row: → defines the position of an item in the grid vertically

📱 Responsive Layout Tip:

Use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); to create a responsive grid layout that adjusts the number of columns based on available space.