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?


2 Answers 2


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
  1. copy "_sources.less" from
    "vendor/magento/theme-frontend-blank/web/css/source" and put it in your theme folder


  1. 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';

  1. Clear var and pub/static folder

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

  3. 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 )


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


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.

  • Bang on. Cheers bud!
    – ItsJhonny
    Jul 16, 2019 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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