Introduction to CSS Grid

CSS Grid is a powerful system for 2D layouts.

Basic properties:

• display: grid – enables grid
• grid-template-columns and grid-template-rows – define grid structure
• gap – controls spacing between cells

Example:

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background: lightblue;
  padding: 20px;
}
</style>

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

Practice Task:
Create a three-column image gallery using Grid.