Grid Layout System

CSS Grid Layout is a two-dimensional layout system for the web.

It lets you lay content out in rows and columns.

/* Grid Container */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  grid-template-rows: 100px 200px;     /* 2 rows */
  gap: 20px;                           /* Space between items */
}

/* Grid Item Placement */
.item1 {
  grid-column: 1 / 3;  /* Span 2 columns */
  grid-row: 1;         /* First row */
}

• display: grid - Creates grid container
• grid-template-columns - Define columns
• grid-template-rows - Define rows
• gap - Space between grid items
• grid-column - Item column placement
• grid-row - Item row placement

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