Grid Layout
Maple's grid system provides high-level abstraction over CSS Grid via shorthand syntax for columns, rows, spanning, and named areas.
Columns
The cols-* utility defines the column structure of a grid container. It supports everything from simple equal-width distributions to complex, mixed-unit layouts using a smart slash syntax.
Equal Columns
To create equal-width columns, provide the number of columns to the cols-* utility. This number automatically resolves to equal fractional units (fr), ensuring the columns distribute available space perfectly.
<!-- Equal Columns -->
<div class="gr cols-3 g-6">
<div>1fr</div>
<div>1fr</div>
<div>1fr</div>
</div>
Fractional Columns
Use the slash syntax to create columns with different fractional ratios. For example, cols-1/2/1 creates a three-column grid where the middle column is twice as wide as the outer ones.
<!-- Fractional Columns -->
<div class="gr cols-1/2/1 g-6">
<div>1fr</div>
<div>2fr</div>
<div>1fr</div>
</div>
Mixed Units
You can mix percentages, fractional units, and pixel-based rems in a single shorthand. For example, cols-1/4_fr_20 resolves to 25%, 1fr, and 5rem simultaneously.
<!-- Mixed Units -->
<div class="gr cols-1/4_fr_20 g-6">
<div>25%</div>
<div>1fr</div>
<div>5rem</div>
</div>
Understanding the Slash
_, Maple treats slashes as mathematical ratios (so 1/4 becomes 25%). However, when used on their own without underscores, slashes act as structural dividers between fractional columns (so cols-1/2/1 becomes 1fr 2fr 1fr). Column Spanning
Use the col-* utility to make an element span multiple columns. You can also use the equal sign syntax col=1/-1 for explicit start and end lines.
<!-- Column Spanning -->
<div class="gr cols-3 g-6">
<div class="col-2">Spans 2 columns</div>
<div>1</div>
<div>1</div>
<div class="col-2">Spans 2 columns</div>
<div class="col=1/-1">Spans 3 columns</div>
</div>
Rows
The rows-* utility defines the row structure of a grid container. It supports everything from simple equal-height distributions to complex, mixed-unit layouts using a smart slash syntax.
Equal Rows
To create equal-height rows, provide the number of rows to the rows-* utility. This number automatically resolves to equal fractional units (fr), ensuring the rows distribute available space perfectly.
<!-- Equal Rows -->
<div class="gr rows-3 g-6 h-80">
<div>1fr</div>
<div>1fr</div>
<div>1fr</div>
</div>
Fractional Rows
Use the slash syntax to create rows with different fractional ratios. For example, rows-1/2/1 creates a three-row grid where the middle row is twice as tall as the outer ones.
<!-- Fractional Rows -->
<div class="gr rows-1/2/1 g-6">
<div>1fr</div>
<div>2fr</div>
<div>1fr</div>
</div>
Mixed Units
You can mix percentages, fractional units, and pixel-based rems in a single shorthand. For example, rows-1/4_fr_20 resolves to 25%, 1fr, and 5rem simultaneously. (Note: The same slash and underscore rules apply here as they do in columns).
<!-- Mixed Units (Rows) -->
<div class="gr rows-1/4_fr_20 g-6 h-100">
<div>25%</div>
<div>1fr</div>
<div>5rem</div>
</div>
Row Spanning
Use the row-* utility to make an element span multiple rows. You can also use the equal sign syntax row=1/-1 for explicit start and end lines. This is particularly useful for creating complex dashboard layouts where some widgets need more vertical space.
<!-- Row Spanning -->
<div class="
gr
cols-3 rows-3 g-6 h-50
">
<div class="row=1/-1">Spans 3 rows</div>
<div class="row-2">Spans 2 rows</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Areas
The areas-* utility defines named grid areas, providing a declarative way to describe the layout structure. Each string represents a row, with area names separated by underscores.
Named Areas
Assign names to grid cells and then use the area=* utility on child elements to place them. This makes layouts much easier to read and maintain than numerical spanning.
<!-- Named Areas -->
<div class="gr areas='a_b'_'c_d' g-6">
<div class="area=a">A</div>
<div class="area=b">B</div>
<div class="area=c">C</div>
<div class="area=d">D</div>
</div>
Area Spanning
To make an area span multiple columns or rows, simply repeat the area name in adjacent cells.
<!-- Area Spanning -->
<div class="gr areas='h_h'_'s_m' cols-1/4_fr g-6">
<div class="area=h">Header</div>
<div class="area=s">Sidebar</div>
<div class="area=m">Main</div>
</div>
Subgrid
You can use the cols-subgrid (or cols=subgrid) and rows-subgrid (or rows=subgrid) utilities to allow nested grids to participate in the sizing of their parent grids.
<!-- Subgrid -->
<div class="gr cols-3 g-6">
<div>1fr</div>
<div class="gr cols-subgrid col-2">
<div>Subgrid 1</div>
<div>Subgrid 2</div>
</div>
</div>
Practical Examples
The true power of Maple's grid engine lies in combining these utilities to build complex, responsive layouts with minimal markup. Here are three common UI patterns built entirely with utility classes.
Feature Cards
A standard grid of equal-width cards that responds to its container. This layout stacks cards in narrow containers and spreads them out into three columns when the container has enough room.
Feature A
Lorem ipsum dolor sit amet, consectetur elit.
Feature B
Sed do eiusmod tempor incididunt magna aliqua.
Feature C
Ut enim ad minim veniam, quis nostrud ullamco.
The Bento Dashboard
A modern, asymmetric layout perfect for dashboards or product showcases. This uses a mix of fractional columns and explicit spanning to create visual hierarchy.
Holy Grail Layout
The classic web application shell. This example demonstrates how beautifully areas-* handles complex structural shifts, moving from a stacked mobile view to a full desktop shell without touching a single media query breakpoint outside of the classes.
<div class="cnt">
<div class="
gr g-4 fs-3.5 --body=oklch(0.56_0.05_260)
areas='header'_'nav'_'main'_'sidebar'_'footer' xs:areas='header_header_header'_'nav_main_sidebar'_'footer_footer_footer' xs:cols-1/3/1
"
>
<header class="
area=header bgc-deepskyblue-100 c-deepskyblue-500
p-6 rad-4 fxrow-cc
">Header</header>
<nav class="
area=nav bgc-coral-100 c-coral-500
p-6 rad-4 fxrow-cc
">Navigation</nav>
<main class="
area=main bgc-limegreen-100 c-limegreen-500
p-6 rad-4 fxcol-cc
">Main</main>
<aside class="
area=sidebar bgc-coral-100 c-coral-500
p-6 rad-4 fxrow-cc
">Sidebar</aside>
<footer class="
area=footer bgc-deepskyblue-100 c-deepskyblue-500
p-6 rad-4 fxrow-cc
">Footer</footer>
</div>
</div> Related Properties
Refer to the underlying CSS Grid properties for granular layout control.