Implementing Fixed and Flexible Columns with CSS Grid

Constructing a Two-Colum Interface

The objective is to build a layout where the first column maintains a fixed width (100px), while the second expands to fill remaining space. The total number of items is variable, and every spacing boundary must remain 10px.

Code Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grid Layout Demo</title>
  <style>
    .layout-wrapper {
      display: grid;
      padding: 10px;
      background-color: #333;
      /* First track fixed at 100px, second takes remaining fraction */
      grid-template-columns: 100px 1fr;
      row-gap: 10px;
      column-gap: 10px;
    }

    .grid-item {
      background-color: #eee;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div class="layout-wrapper">
    <div class="grid-item">Item A</div>
    <div class="grid-item">Item B</div>
    <div class="grid-item">Item A</div>
    <!-- Items automatically flow into rows -->
  </div>
</body>
</html>

Core Container Properties

To define the structure of the grid container, specific attributes control the tracks:

Defining Tracks: Use grid-template-columns to specify widths for vertical divisions. Acceptable units include pixels (px), flexible fractions (fr), or auto-sizing.
Row Heights: Similarly, grid-template-rows dictates horizontal heights. Multiple values can define distinct rows.
Spacing: The gap property simplifies managing gutters.
- grid-gap: Legacy shorthand (row-gap followed by column-gap).
- row-gap / column-gap: Specific control over vertical or horizontal spacing.
- Single value gap: 10px applies the same size to both directions.

Spanning Rows and Columns

Items within the grid can occupy multiple tracks, effectively merging cels.

Syntax Variations

There are two primary methods to span columns:

Span Keyword: grid-column: 1 / span 2; (Starts at index 1, spans 2 tracks).
Explicit Line Indices: grid-column: 1 / 3; (Occupies area between line 1 and line 3).

Both result in the item occupying the first and second columns. The difference lies in whether you count from a start point (span) or define boundaries explicitly.

Advanced Example

This example demonstrates overlapping track spans.

<style>
  .advanced-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 100px);
    background: #2196F3;
    padding: 10px;
  }

  .cell {
    background: rgba(255,255,255,0.8);
    padding: 20px;
    font-size: 1.5rem;
    color: white;
    text-align: center;
  }

  /* Spans across the full width */
  .full-width {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  /* Tall vertical item spanning two rows */
  .tall-item {
    grid-column: 4;
    grid-row: 1 / span 3;
  }

  /* Another wide item at the bottom */
  .bottom-wide {
    grid-column: 1 / span 3;
    grid-row: 4;
  }
</style>

<div class="advanced-grid">
  <div class="cell full-width">Wide Item</div>
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell tall-item">Tall</div>
  <div class="cell">Cell 3</div>
  <div class="cell bottom-wide">Bottom Wide</div>
</div>

Tags: CSS Grid Frontend Development Layout Design Responsive Web

Posted on Wed, 16 Sep 2026 16:40:57 +0000 by torleone

Freaks City