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 enables two-dimensional layouts with clean, semantic HTML. This example creates a card grid that displays three columns on desktop and one column on mobile without media queries, using auto-fill and minmax. The HTML formatter aligns nested divs and the CSS shows the complete grid definition. Use this as a starting point for card grids, dashboards, and product listings.

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 standard layout model for one-dimensional UI components like navi...

Format a Semantic HTML Page Structure

Semantic HTML uses elements that describe meaning rather than just presentation,...

Format CSS Media Queries

Mobile-first media queries start with styles for small screens and layer on addi...