1

In the Magento 2 UI library there are LESS variables for the layout grid. See Magento UI Library > Layout.

Particullarly there are these two:

Variables list names           Default value    Allowable values    Comment
@total-columns                      12        '' | false | value    Number of total columns in layout (i.e. 1, 2, 3)
@layout-column__sidebar-width        2        '' | false | value    Sets sidebar width

How does @total-columns work, where is it used? It has a default value of 12. I have only seen 3 columns in Magento 2, .column.main, .sidebar-main and .sidebar-additional. I haven't seen any page with 12 columns.

How does @layout-column__sidebar-width work, where is it used? It's default value of 2 makes no sense, is it 2px, 2 columns of width.

When you look at these values on the frontend they are percentage measurements: enter image description here

4

ok, so @total-columns & @layout-column__sidebar-width work by setting the width side bar by dividing one into another.

If you check Luma's compiled style-l.css file, example.
You'll find all the main column width changes depending on the number of page layut columns and sidebars have a width of 20.83333333%.

.page-layout-1column .column.main {
  width: 100%;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.page-layout-3columns .column.main {
  width: 58.33333333%;
  display: inline-block;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.page-layout-2columns-left .column.main {
  width: 79.16666667%;
  float: right;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.page-layout-2columns-right .column.main {
  width: 79.16666667%;
  float: left;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.sidebar-main {
  padding-right: 2%;
}
.page-layout-3columns .sidebar-main {
  width: 20.83333333%;
  float: left;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.page-layout-2columns-left .sidebar-main {
  width: 20.83333333%;
  float: left;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.page-layout-2columns-right .sidebar-main {
  width: 20.83333333%;
  float: left;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.page-layout-2columns-right .sidebar-main {
  padding-left: 2%;
  padding-right: 0;
}
.sidebar-additional {
  clear: right;
  padding-left: 2%;
}
.page-layout-3columns .sidebar-additional {
  width: 20.83333333%;
  float: right;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}
.page-layout-2columns-left .sidebar-additional {
  width: 20.83333333%;
  float: right;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.page-layout-2columns-right .sidebar-additional {
  width: 20.83333333%;
  float: right;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
.page-layout-2columns-left .sidebar-additional {
  clear: left;
  float: left;
  padding-left: 0;
  padding-right: 2%;
}

The width of 20.83333333% is calculated by dividing @layout-column__sidebar-width by @total-columns. The main column width is similarly calculated depending on the number of page layut columns.

In Luma the @total-columns is set to 24 & @layout-column__sidebar-width is set to 5 in:

app/design/frontend/Magento/luma/web/css/source/_theme.less

//
//  Layout grid
//  ---------------------------------------------

@total-columns: 24;

//  Variables for layout columns
@layout-column__sidebar-width: 5;

//  Checkout columns width
@layout-column-checkout__width-left: 6;

The .sidebar-main { padding-right: 2%; } is set with @layout-column-main__sidebar-offset: 2%; in:

app/design/frontend/Magento/blank/web/css/source/_layout.less


Also worth noting are the checkout column widths:

//  Checkout columns width
@layout-column-checkout__width-left: 3;
@layout-column-checkout__width-main: @layout-column__width - @layout-column-checkout__width-left;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.