HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

CSS Grid

CSS Grid Layout

While Flexbox is for one-dimensional layouts (a row OR a column), CSS Grid is for two-dimensional layouts (Rows AND Columns simultaneously).

Key Concepts

display: grid; applied to the parent container.
grid-template-columns and grid-template-rows define the grid tracks. You can use pixels, percentages, or the powerful fr (fractional) unit.
gap adds spacing between the grid items.

Example: grid-template-columns: 1fr 2fr 1fr; creates three columns where the middle one is twice as wide as the outer ones.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; background: #fdfdfd; }
    
    .grid-container {
      display: grid;
      /* Creates 3 columns. 
         Repeat function makes it easier.
         1fr means "1 fraction of available space" */
      grid-template-columns: repeat(3, 1fr);
      
      /* Creates 2 rows */
      grid-template-rows: 100px 150px;
      
      /* Spacing between items */
      gap: 15px; 
    }
    
    .grid-item {
      background-color: #8e44ad;
      color: white;
      padding: 20px;
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
      border-radius: 8px;
    }
    
    /* We can tell specific items to span multiple columns/rows! */
    .item-1 { grid-column: span 2; background: #e74c3c; }
    .item-4 { grid-column: span 3; background: #2ecc71; }
  </style>
</head>
<body>

<h2>CSS Grid Dashboard Layout</h2>
  
  <div class="grid-container">
    <div class="grid-item item-1">Item 1 (Spans 2 Columns)</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item item-4">Item 5 (Spans All 3 Columns)</div>
  </div>

</body>
</html>

Result

Topics