4

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?

4

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

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

  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 )

1

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.

  • Bang on. Cheers bud! – rupi Jul 16 at 16:07

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.