What does minmax(280px, 1fr) do?

minmax sets a minimum width of 280px and a maximum of 1fr (one fraction of available space). Combined with auto-fill, columns are added or removed as the viewport changes.

When should I use Grid vs Flexbox?

Use Grid for two-dimensional layouts where you control both rows and columns simultaneously. Use Flexbox for one-dimensional layouts like nav bars, button groups, or card content.

How do I make a grid item span multiple columns?

Use grid-column: span 2 on the item to make it occupy two columns. You can also use grid-column: 1 / 3 to place it at specific column lines.

Format an HTML CSS Grid Layout

CSS Grid is the modern two-dimensional layout system that has transformed how developers build responsive interfaces. Before Grid, creating a three-column card layout that gracefully collapsed to one column on mobile required either a float-based layout with clearfix hacks, a flexbox layout with calculated widths, or a CSS framework like Bootstrap's grid system. With CSS Grid and the auto-fill + minmax combination, a single CSS declaration handles the responsive behavior without any media queries. The magic in this example is the grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) declaration. Breaking it down: minmax(280px, 1fr) defines that each column should be at least 280 pixels wide and at most one fraction of the available space. auto-fill tells the browser to create as many columns as will fit given those constraints. As the viewport narrows, columns that no longer fit naturally wrap to the next row. On a 1200px container, you get approximately four columns; on a 900px container you get three; on a 600px container you get two; on a narrow mobile viewport you get one — all automatically, with zero JavaScript. The gap: 1.5rem property (formerly known as grid-gap) sets spacing between all grid items simultaneously — no need for margin-based spacing with first-child/last-child exceptions that were required in the float/flexbox era. Card structure: each .card element uses standard box model properties — background white, a subtle gray border, 8px border radius for rounded corners, and internal padding. The h2 resets its margin to control spacing precisely rather than relying on browser defaults. This is a complete, ready-to-use card component. Grid vs Flexbox decision guide: use Grid when you need to control layout in both dimensions (rows and columns) simultaneously, for example a dashboard where cards should align across both rows and columns. Use Flexbox when laying out a single row or column of items where content drives the sizing, for example a navigation bar or a row of tags. Real-world scenarios: a product listing page where cards adapt from 4 columns on desktop to 2 on tablet to 1 on mobile; a dashboard with multiple data widgets that rearrange based on available space; a team member directory with photo cards in a responsive grid. Customisation: change 280px to adjust when the grid collapses from multiple columns to fewer. Add grid-auto-rows: 200px to make all rows a fixed height, useful for image galleries where you want uniform card sizes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; }
    .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
    .card h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="card"><h2>Card One</h2><p>Description text here.</p></div>
    <div class="card"><h2>Card Two</h2><p>Description text here.</p></div>
    <div class="card"><h2>Card Three</h2><p>Description text here.</p></div>
  </div>
</body>
</html>

[ open in HTML Formatter → ]

FAQ

What does minmax(280px, 1fr) do?: minmax sets a minimum width of 280px and a maximum of 1fr (one fraction of available space). Combined with auto-fill, columns are added or removed as the viewport changes.
When should I use Grid vs Flexbox?: Use Grid for two-dimensional layouts where you control both rows and columns simultaneously. Use Flexbox for one-dimensional layouts like nav bars, button groups, or card content.
How do I make a grid item span multiple columns?: Use grid-column: span 2 on the item to make it occupy two columns. You can also use grid-column: 1 / 3 to place it at specific column lines.

Related Examples

Format an HTML Flexbox Layout

Flexbox is the one-dimensional layout model that every web developer uses daily,...

Format a Semantic HTML Page Structure

Semantic HTML is the practice of choosing HTML elements based on the meaning the...

Format CSS Media Queries

Media queries are the mechanism that makes responsive design possible, allowing ...