How to use Magento 2's LESS grid system

Question

How are the grid mixins in Magento 2 (vendor/magento/magento2-base/lib/web/css/source/lib/_grids.less) supposed to be used.

For example: I want to display 3 divs as equal columns with margin in between (but not on the outer left and right) - how can I use the grid system for that?

Answer 1

if you want to use grid system like magento admin, you need to follow below steps

1. copy below files/folder from "vendor/magento/theme-adminhtml-backend/web/css/source"

  a. utilities(folder)

  b. _grid.less

  c. _utilities.less

2. copy "_sources.less" from
   "vendor/magento/theme-frontend-blank/web/css/source" and put it in your theme folder

app/design/frontend/package/theme/web/css/source

3. edit _sources.less (to add "_utilities.less'" and "_grid.less" )

   @import '_variables.less';

   @import (reference) '_extends.less';

   @import '_utilities.less';

   @import '_typography.less';

   @import '_layout.less';

   @import '_tables.less';

   @import '_grid.less';

   @import '_messages.less';

   @import '_navigation.less';

   @import '_tooltips.less';

   @import '_loaders.less';

   @import '_forms.less';

   @import '_icons.less';

   @import '_buttons.less';

   @import '_sections.less';

   @import '_pages.less';

   @import '_actions-toolbar.less';

   @import '_breadcrumbs.less';

   @import '_popups.less';

   @import '_price.less';

4. Clear var and pub/static folder

5. Run php bin/magento setup:static-content:deploy (append -f for Magento 2.x.x > versions)

6. after completed static content deploy check "styles-m.css and styles-l.css" files under /pub/static/frontend/package/theme/en_US/css"

you can find all grid class under it (eg. .col-xs-1, .col-m-1, .col-l-1, .col-xl-1, .col-xs-2, .col-m-2, .col-l-2, .col-xl-2, .col-xs-3, .col-m-3, .col-l-3, .col-xl-3, .col-xs-4, .col-m-4, .col-l-4, .col-xl-4, .col-xs-5, .col-m-5, .col-l-5, .col-xl-5, .col-xs-6, .col-m-6, .col-l-6, .col-xl-6, .col-xs-7, .col-m-7, .col-l-7, .col-xl-7, .col-xs-8, .col-m-8, .col-l-8, .col-xl-8, .col-xs-9, .col-m-9, .col-l-9, .col-xl-9, .col-xs-10, .col-m-10, .col-l-10, .col-xl-10, .col-xs-11, .col-m-11, .col-l-11, .col-xl-11, .col-xs-12, .col-m-12, .col-l-12, .col-xl-12 )

Answer 2

As of 2.2.5, the step above would produce several undefined less variables including the following undefined variables @icon-print, @icon-error and etc.

However, adding the following imports

@import '_grid.less'; @import '_utilities.less';

in _extend.less file would just return @content__indent variable undefined. The @content__indent variable can be found under

vendor/magento/theme-adminhtml-backend/web/css/source/variables/_structure.less

Just copy the declaration of the following variables @indent__base, @indent__l and @content__indent and your good to go.

This is somewhat a lean method to keep your theme clean.