Grid

The grid is based on flexbox and uses an outer .grid class to define a horizontal grid container. From there, a number of .grid__col column elements can be added. Per default until further classes have been added, all column elements are given even widths – below is shown 7 columns with even widths at all screen sizes. The grid uses set gutters by default.
To ensure proper responsive behavior, each grid column is usually given extra classes that correlate to the set breakpoints screen-xs, screen-sm, screen-md, screen-lg, screen-xl and screen-xxl – NOT screen-sm-plus.
For example purposes .rm-this-class--grid-example is added here to visualize the grid-items. This should be removed if html is copied from example.

Grid

Component status: WIP

The grid is based on flexbox and uses an outer .grid class to define a horizontal grid container. From there, a number of .grid__col column elements can be added. Per default until further classes have been added, all column elements are given even widths – below is shown 7 columns with even widths at all screen sizes. The grid uses set gutters by default.
To ensure proper responsive behavior, each grid column is usually given extra classes that correlate to the set breakpoints screen-xs, screen-sm, screen-md, screen-lg, screen-xl and screen-xxl – NOT screen-sm-plus.
For example purposes .rm-this-class--grid-example is added here to visualize the grid-items. This should be removed if html is copied from example.

No set width, fluid

<div class="grid rm-this-class--grid-example">
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
	<div class="grid__col" style="background:silver;padding:10px;">
		No set width, fluid
	</div>
</div>

Se mere

Grid with column widths

The columns now have responsive widths

See Grid with column widths in variations.

Grid with column widths

Component status: WIP

The columns now have responsive widths

See Grid with column widths in variations.

Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop

<div class="grid rm-this-class--grid-example">
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
</div>

Se mere

Grid without gutter

The grid gutters are set to 0 with the class .no-gutter.

Grid without gutter

Component status: WIP

The grid gutters are set to 0 with the class .no-gutter.

Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop

<div class="grid rm-this-class--grid-example no-gutter">
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
	<div class="grid__col grid__col--12 grid__col--xs-6 grid__col--sm-4 grid__col--md-2" style="background:silver;padding:10px;">
		Full width mobile, half width mobile landscape, 1/3 width tablet, 1/6 width desktop
	</div>
</div>

Se mere

Se mere

Se mere

[title]