The level layout is designed to distribute space evenly between sections of content and center them horizontally.


By default, level items are placed on the page horizontally and wrap. The level layout is not responsive, but items will wrap as the viewport is resized.

A level layout will contain:

  1. Level: The level container, which holds all level items.
  2. Level item: An individual section of content to be placed in the level container.


The level layout can be used to ensure that sections of content are neatly and evenly displayed across the width of a UI.


To adjust spacing between items, you can apply gutters.

View source on GitHub