Using Materialize CSS Responsive Grid to Build Adaptive Layouts

Quick answer: use .row and .col with breakpoint suffixes

To make a layout that changes with screen size, wrap columns in a .row and apply column classes that combine size prefixes (.s, .m, .l) with a number from 1 to 12. The classes are pure CSS, so the grid works even if JavaScript is disabled.

Worked example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title>Materialize Grid Demo</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col s12 m8 l6">
        <p>First column</p>
      </div>
      <div class="col s12 m4 l6">
        <p>Second column</p>
      </div>
    </div>
  </div>
</body>
</html>

How the grid works

Materialize CSS defines a 12‑column fluid grid. The breakpoint prefixes map to minimum widths: .s* (≥0 px), .m* (≥601 px), .l* (≥993 px). When the viewport width meets a breakpoint, the corresponding classes dictate the column’s width as a percentage of the row (e.g., .l6 → 50 %). If a size prefix is omitted, the smallest defined size applies. Columns stack vertically when the total of the specified widths exceeds 12 or when the viewport is narrower than the smallest breakpoint.

Limits

• Columns must be direct children of a .row; otherwise the grid’s negative margins do not apply and gutters disappear.
• Nesting a grid requires a new .row wrapper inside a column; you cannot simply add more column classes to the same element.
• The breakpoint values are fixed in the compiled CSS; to change them you must override the Sass variables ($grid-breakpoints) and rebuild the stylesheet.
• Only the three predefined sizes (small, medium, large) are available; there is no extra‑large or extra‑small tier without custom Sass.

Common mistakes

• Omitting the viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">) prevents the browser from reporting the actual device width, so the grid stays at the desktop layout.
• Applying column classes to elements that already have padding or margin (e.g., a <section> with default browser spacing) adds to the gutter, making columns appear wider than expected. Use an empty <div> as the column container or add offset classes (.offset-*) to adjust spacing.
• Forgetting that the column widths are based on the row’s width, not the viewport, can lead to surprise when a column is placed inside a narrow container; the percentages are relative to that container.