Build a Predictable Responsive Layout with Materialize CSS Grid

The problem: columns that look right on desktop but collapse incorrectly on mobile

Materialize CSS uses a mobile-first 12-column grid built from three elements: container, row, and col. The useful takeaway is that correct responsive behavior depends less on the col classes alone and more on the viewport meta tag and strict container > row > col nesting. Without those, the grid will appear broken on phones even when the markup looks correct.

Materialize CSS is no longer actively maintained. For new Material Design work, teams often choose Material UI or Tailwind with Material plugins for ongoing security updates. If you are maintaining an existing Materialize codebase, the grid still works predictably when used as documented.

Desired outcome

A layout where columns stack vertically on narrow screens and flow horizontally on wider screens, with consistent gutters, using the s, m, l, xl size prefixes. A typical target is a two-column section on medium and larger screens that becomes single column on small screens.

Prerequisites

Include Materialize CSS in the document head and add the viewport meta tag. The viewport tag tells mobile browsers how to scale the page; without it, the grid media queries will not match device width.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="materialize.min.css" rel="stylesheet">

Load the JavaScript bundle only if you need components like modals or dropdowns. The grid requires only CSS.

Understand the naming. s = small, m = medium, l = large, xl = extra large. A class like col s12 m6 means 12 columns on small screens and 6 columns on medium and up. Mobile-first means smaller breakpoints apply first and larger prefixes override them.

Focused procedure

Wrap content in container

container sets a max-width and centers content. Use container-fluid for full-width.

<div class="container">
  <!-- rows go here -->
</div>

Create a row

row is a flex container with negative horizontal margins to counteract column padding. Do not place columns directly inside container.

Add columns with responsive prefixes

Each col must be a direct child of row. Column widths are expressed as a number from 1 to 12. The sum of columns in a single row should not exceed 12.

<div class="row">
  <div class="col s12 m6">
    <!-- left panel -->
  </div>
  <div class="col s12 m6">
    <!-- right panel -->
  </div>
</div>

This example stacks both panels on small screens and places them side by side on medium and larger screens.

Offsets and gutters

Offset a column with offset-s3, offset-m4, etc. Gutters are the padding between columns, applied by the row and col classes. Customizing gutters requires overriding row margins and col padding. Nested grids require a new row inside a parent col, not directly inside another row.

<div class="col s12 m8 offset-m2">
  <div class="row">
    <div class="col s6">Nested A</div>
    <div class="col s6">Nested B</div>
  </div>
</div>

Expected checks

Inspect the HTML source to verify the viewport meta tag exists in head and that the hierarchy is container > row > col with no skipped levels.

Open developer tools device toolbar and resize the viewport. Columns should stack at narrow widths and unstack at the defined breakpoints. Compare class names and column counts against Materialize documentation examples for consistency.

Check that no row contains columns summing to more than 12, which would cause wrapping. Verify offsets are applied to the col, not the row.

Recovery options for common layout issues

Layout does not respond on mobile. Check for missing or malformed viewport meta tag. Add or correct it and reload. This is the most common cause of grid breakage on phones.

Columns overflow or have uneven gutters. Verify each row is wrapped in a container and that columns are direct children of row. Remove duplicate nesting where a row sits inside another row without an intervening col.

Unexpected wrapping on desktop. Sum the column numbers in the row for the current breakpoint. Reduce widths or move content to a new row. For example, change col l8 + col l6 to col l7 + col l5.

Nested grid miscalculates widths. Ensure the nested row is inside a parent col and that the nested columns use their own s/m/l prefixes relative to the parent width.

Limitations

Materialize CSS grid is fixed to a 12-column system with predefined breakpoints. It does not provide CSS Grid features like explicit placement or subgrid. Because the project is unmaintained, expect no new breakpoint options or bug fixes.

Practical verification is visual and structural: confirm viewport meta presence, correct nesting, and responsive stacking across breakpoints using browser tools.