How to use Magento 2's UI Library Layout LESS variables

Question

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:

Answer 1

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;