Grid

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.

Usage

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.

API

Sub-Components

Container

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

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

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

Caveats

All the columns here have a thin border to help you see them properly, however this is not the case for when you use them.

Breakpoints based props on grid components work in an andUp fashion. With this in mind the xs breakpoint is assumed and has been removed from the props context. This applies to offset, justify, align, and single breakpoint props on Col.

Props like justify-sm and justify-md exist, but justify-xs does not, it is simply justify.
The xs prop does not exist on Col. The equivalent to this is the cols prop.

Examples

Align

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

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.

Edit This Page on GitHub

Last Updated: 2022-10-03