Responsive 12 Column Grid System

The problem with the above example is that a col-1 will span 1 column grid on every device size, and on mobile this can become very small. To fix this issue we will replace the col-1 class with 3 classes, a desktop, tablet and mobile class. Prepend the class with d- to specify how many column grids the column should occupy on desktop, t- for tablet, and m- for mobile.

Flexgrid

An alternative system to the 12 Column Grid System is the Flexgrid system, this columns does not rely on a fixed percetage but rather stretches/shrinks each column so that each they all fit within the parent. Using this system we can just add children and the gird will adjust accordingly. To use this sytem give the parent a class of flexgrid.

Notice in the example below that both Flexgrids have the same class but the second one has an extra child element and the flexgrid automatically adjusts the widths of each child element to make room for the new child element.

Flex Values

If you dont want each child element to be the same width you can give each a flex value using the flex-# (between 1 and 10) class. The flex value is the value that determins how much each child element should grow/shrink in relation to the other child elements. By default all child elements have a flex value of 5, and because each has an identical flex value they will be the same width.

In the example below the second child element is given a class of flex-10, and because the first child element has the default flex value of 5 this will make the second child element twice as wide as the first.

Responsive Flexgrid

The Flexgrid is not responsive, this means that the elements will not be forced to "grow" at a specific break point. But the Flexgrid does allow fo elements to wrap if they can not fit on the current row. This means that if we give a child element a minimum width it will automatically wrap to the next row when it reaches this minimum width, and all child elements will then be re-adjusted to occupy the total horizontal space (aka their widths will be adjusted). This is done using an inline-style.

Floats

Tables were originally designed to display data, but they were once used for layouts until we found a better way. Floats were originally designed to allow text to flow around other content (such as images) but floats were also once used for layouts until we found a better way.

Do not use floats to align content horizontally, instead use one of the layout systems documented above.

Deprecated Grid System

On the High Country Gardens Magento 1 site a different 12 Column Grid System was used that used "floats", this was a terrible system but much of that content was brought over to Magento 2 and so that grid system must still be supported.

That old grid system used classes like this col span_6_of_12. Please do not use this system and when you do run into it in the lagacy content please convert it.

Floats can and should be used as they were originally intended to float text around other content, to use these floats use the classes float-left and float-right.