Layout - rocketweb-fed/magento2-theme-prime GitHub Wiki

Aside from traditional column layout available in Magento Blank Prime offers two additional types of layouts for laying out content:

1. Flex layout
2. Grid layout

Note: layout mixins and rules are defined in web/css/source/components/globals/layout.less.

To add flexbox model to an element add class .flex or use .flex-set() mixin on a parent element.

To specify column width add class .flex__item-<width> to the children elements, eg. flex__item-25

See the reference table below for available classes, mixins and values.

Class	Mixin	Mixin values	Comment
.flex	.flex-set()	flex* | inline-flex	Sets flex layout
.flex__item			Sets children as flex items
.flex--wrap	.flex-wrap()	wrap* | nowrap | wrap-reverse	Sets flex wrap property
.flex--row	.flex-direction(@direction: row)	column | row* | row-reverse | column-reverse	Sets flex direction property
.flex__item--50	.flex-basis(@width: 50%)	auto | <length>	Sets width of colum to 50%
.flex__item--33	.flex-basis(@width: 33%)	auto | <length>	Sets width of colum to 33%
.flex__item--25	.flex-basis(@width: 25%)	auto | <length>	Sets width of colum to 25%
	.flex-align(@position: center)	flex-start | flex-end | center* | baseline | stretch	Aligns items vertically
	.flex-justify(@position)	flex-start | flex-end | center | space-between | space around | space-evenly	Aligns items horizontally

* - default value (can be omitted)

To create a CSS grid create a parent element with the class .grid and specify the number of columns using .grid-<cols> class. Alternatively set class .grid-auto for automatic width calculations.

All child elements should have the class .grid-item.

See the reference table below for available classes, mixins and values.

Class	Mixin	Mixin values	Comment
.grid			Sets grid layout
.grid__item			Doesn't affect layout, added for BEM consistency
.grid--auto	.grid-auto(@width: minmax(@rw-layout__grid-width--min, 1fr); @method: auto-fit)	<width> ; <integer> | auto-fill | auto-fit	Sets column width to auto
.grid--2	.grid-set(@cols: 2)	<cols>	Sets number of columns to 2
.grid--3	.grid-set(@cols: 3)	<cols>	Sets number of columns to 3
.grid--4	.grid-set(@cols: 4)	<cols>	Sets number of columns to 4
.grid--6	.grid-set(@cols: 6)	<cols>	Sets number of columns to 6
	.grid-column(@start; @end)	<track> ; <track>	Sets the position of cell between tracks
	.grid-row(@start; @end)	<track> ; <track>	Sets the position of cell between tracks

See MDN docs on CSS Grid for more info.

You can see demo of layout options in action on UI reference page: http://<project-url>/ui