CSS Responsive

RWD Grid View

A grid view divides the page into columns that content sits inside. Making that grid responsive means the columns should adjust — or collapse — as the screen narrows. This page shows two ways to build a responsive grid: the classic percentage approach and the modern CSS Grid auto-fit technique.

What is a Grid View?

A grid view splits the available width into a number of equal columns. Content blocks then occupy one or more columns. Traditional CSS frameworks built this with floated boxes sized in percentages; today CSS Grid does it far more cleanly.

The Classic Percentage Approach

The oldest responsive technique sizes each column as a percentage of the container. Four columns at 25% each fill the row, and because percentages are relative, they shrink together as the screen narrows.

Percentage-based columns — resize the result

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; }
  .row { overflow: hidden; padding: 10px; background: #f1f5f9; }
  .col {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 8px;
  }
  .inner {
    background: #6366f1; color: #fff; padding: 24px 8px;
    border-radius: 6px; text-align: center; font-weight: 700;
  }
  .col:nth-child(even) .inner { background: #ec4899; }
</style>
</head>
<body>
  <div class="row">
    <div class="col"><div class="inner">25%</div></div>
    <div class="col"><div class="inner">25%</div></div>
    <div class="col"><div class="inner">25%</div></div>
    <div class="col"><div class="inner">25%</div></div>
  </div>
</body>
</html>

ℹ️

The float approach still works but is dated. Use box-sizing: border-box so padding does not add to the width and break the percentages.

The Modern Auto-Fit Grid

CSS Grid makes a responsive grid trivial with one line: repeat(auto-fit, minmax(160px, 1fr)). This fits as many columns of at least 160px as will fit, then stretches them to fill the row — reflowing automatically with no media queries at all.

Auto-fit responsive grid — resize the result

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; }
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    padding: 14px;
    background: #f1f5f9;
  }
  .card {
    background: #14b8a6; color: #fff; padding: 30px 12px;
    border-radius: 8px; text-align: center; font-weight: 700;
  }
  .card:nth-child(3n) { background: #f59e0b; }
  .card:nth-child(3n+1) { background: #6366f1; }
</style>
</head>
<body>
  <div class="auto-grid">
    <div class="card">1</div><div class="card">2</div>
    <div class="card">3</div><div class="card">4</div>
    <div class="card">5</div><div class="card">6</div>
  </div>
</body>
</html>

💡

minmax(160px, 1fr) is the magic: 160px is the minimum column width before wrapping, and 1fr lets columns stretch to share leftover space evenly.

auto-fit vs auto-fill

Keyword	Behaviour when there are few items
auto-fit	Existing columns stretch to fill the whole row
auto-fill	Empty phantom columns are kept, so items stay their min size

Key Points

A grid view splits the width into columns that hold content.
The classic method sizes columns in percentages with box-sizing: border-box.
Modern CSS Grid uses repeat(auto-fit, minmax(min, 1fr)) for a self-reflowing grid.
minmax sets the smallest column width before wrapping; 1fr shares the rest.
auto-fit stretches columns to fill the row; auto-fill keeps empty tracks.