The <Layout/> component serves as the container for <Module/> components,
establishing the foundational grid system for your page. It employs a 12-column
grid to organize content, which gracefully adjusts to a 6-column "half-size"
grid on screens narrower than 40em. This design ensures your layout remains
responsive across various devices. You have the option to include or exclude
horizontal whitespace in your layout. Opting out of whitespace creates a
dashboard-like feel, perfect for data-heavy interfaces, while including
whitespace gives your page an article-like aesthetic that's ideal for
content-rich experiences.
Module
The <Module/> component lives within a <Layout/>, allowing you to position
and size your content within the grid system. You can choose from a range of
sizes—"xl", "lg", "md", "sm", "xs"—to control how many columns each module
spans. There's also a "full" option that makes a module span all columns and a
"none" option if you want it to disappear entirely. For smaller screens
utilizing the 6-column half-grid, you can use the "half" attribute with the same
size options to maintain responsiveness. This flexibility ensures your content
looks great no matter the screen size.
Coming up next is a hands-on demo of the <Layout/> component where you can add
and configure <Module/> components yourself. You'll find a "Whitespace Mode"
checkbox that lets you toggle the horizontal whitespace, allowing you to
experience how it transforms the layout from a spacious article feel to a more
compact dashboard style. There's also an "Add Module" button that spawns new
modules, each containing two select inputs: one for the "size" attribute and
another for the "half" attribute. Feel free to mix and match different sizes to
see how they affect the layout. And don't forget to resize your browser
window—making it smaller will let you observe how the grid adapts to a half-grid
layout on narrower screens.