Svelte Materialify comes with a 12 column grid system built using flexbox. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl.


The Svelte Materialify grid is heavily inspired by the Bootstrap Grid. It is integrated by using a series of containers, rows, and columns to layout and align content.




Container provides the ability to center and horizontally pad your site’s contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes.


Row is a wrapper component for Col. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of 24px. This can be reduced with the dense prop or removed completely with noGutters.


Col is a content holder that must be a direct child of Row.




Change the vertical alignment of flex items and their parents using the align and align-self helper classes.

Breakpoint Sizing

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.


Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes. This allows you to fine tune your application layout precisely to your needs.

Margin Helpers

Using the auto margin helper utilities you can force sibling columns away from each other.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2022-10-03