Magento 2. Argento grid system.

by Peter D.

Argento grid system

Argento utilize Bootstrap powered 12 columns grid system to organize CMS content.

Typical grid markup with three equal width columns on all devices:

<div class="argento-grid">
    <div class="col-xs-4">
    <div class="col-xs-4">
    <div class="col-xs-4">

col-xs means that this rule will work on all screen dimensions. If you want to specify separate rules for different devices, you have to use some classes with appropriate suffix.

Column size prefix Description
-xs All screens rule
-sm Small screen / tablet
-md Medium screen / desktop
-lg Large screen / wide desktop

See more examples at official Bootstrap documentation.


Slider and banner content

magento 2 customization

Slider and banner content are using col-md-8 and col-md-4 classes. Three banners are wrapped into additional grid, that works on small devices only. Each of banner has col-md-12 and col-xs-4 class that makes them organized into 1 column for tablets and desktops and 3 columns for the phones.

Homepage tabs, testimonials, featured products.

magento 2 customization

Magento 2 homepage product tabs and additional sidebar are wrapped into col-md-8 and col-md-4 classed. Testimonials, Bestsellers and Popular products are wrapped into additional grid for tablet and mobile devices.

Testimonials block expands to full screen width, while Bestsellers and Popular products stay on the same line in two columns. Each of blocks have the following classes for mobile grid: col-xs-12 (full width), col-xs-6 (half width).

Footer content

magento 2 customization

Footer CMS content and footer contacts sections are wrapped into col-md-9 and col-md-3 classes to fit tablets and desktops. You can also see that each of "About us", "Customer center" and other footer link groups are using col-md-3 and col-xs-6 classes. This makes them organized into 4 columns on tablets and desktops and 2 columns on phones.

Recent articles