Layout


12 Column Grid System

A 12 column grid system is used because 12 is divisible by 2, 3 and 4. This allows you to easily create columns that span 1/2, 1/3, 2/3, 1/4 and 3/4 of the page.

All columns should have a common parent element with a .col-parent class. Each column should have a class of col-# where the "#" is the number of column grids (out of 12) that this column should span.

<div class='col-parent'>
  <div class='col grid-11'>.col.grid-11</div>
  <div class='col grid-1'>.col.grid-1</div>
  <div class='col grid-10'>.col.grid-10</div>
  <div class='col grid-2'>.col.grid-2</div>
  <div class='col grid-9'>.col.grid-9</div>
  <div class='col grid-3'>.col.grid-3</div>
  <div class='col grid-8'>.col.grid-8</div>
  <div class='col grid-4'>.col.grid-4</div>
  <div class='col grid-7'>.col.grid-7</div>
  <div class='col grid-5'>.col.grid-5</div>
  <div class='col grid-6'>.col.grid-6</div>
  <div class='col grid-6'>.col.grid-6</div>
</div>
.col.grid-11
.col.grid-1
.col.grid-10
.col.grid-2
.col.grid-9
.col.grid-3
.col.grid-8
.col.grid-4
.col.grid-7
.col.grid-5
.col.grid-6
.col.grid-6
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.

<div class='col-parent'>
  <div class='col d-grid-3 t-col-6 m-grid-12'>.col.d-grid-3.t-grid-6.m-grid-12</div>
  <div class='col d-grid-3 t-col-6 m-grid-12'>.col.d-grid-3.t-grid-6.m-grid-12</div>
  <div class='col d-grid-3 t-col-6 m-grid-12'>.col.d-grid-3.t-grid-6.m-grid-12</div>
  <div class='col d-grid-3 t-col-6 m-grid-12'>.col.d-grid-3.t-grid-6.m-grid-12</div>
</div>
.col.d-grid-3.t-grid-6.m-grid-12
.col.d-grid-3.t-grid-6.m-grid-12
.col.d-grid-3.t-grid-6.m-grid-12
.col.d-grid-3.t-grid-6.m-grid-12

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.

<div class='flexgrid'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class='flexgrid'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
1
2
3
1
2
3
4
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.

<div class='flexgrid'>
  <div>5</div>
  <div class='flex-10'>10</div>
</div>
5
10
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.

<div class='flexgrid'>
  <div style='min-width:320px'>1</div>
  <div style='min-width:320px'>2</div>
  <div style='min-width:320px'>3</div>
</div>
1
2
3
Flexgrid Rows

Flexgrid is a way of saying "make the children fit", this concept also works on vertical space to create rows. To create Flexgrid Rows the parent must have a fixed height and a class of flexgrid-rows.

In the example below we can see that the child elements stretch vertically to fit the parent's height.

<div class='flexgrid-rows' style='height:400px'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
Flexgrid Rows Flex Values

You can use flex values on flexgrid rows just as we did with flexgrid columns.

<div class='flexgrid-rows' style='height:400px'>
  <div>5</div>
  <div class='flex-10'>10</div>
</div>
5
10

Center Contents

To center an element both vertically and horizontally give the parent a class of center-contents.

<div class='center-contents' style='height:200px;'>
  <div style='width:100px;height:100px'>content</div>
</div>
content

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.

<img src='red-square.png' class='float-right' />
<p style='margin-top:0;padding-top:0'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, quos? Quos nostrum consectetur quidem ab quaerat libero perferendis voluptatem, alias sint possimus odio. Ratione explicabo optio sed architecto itaque saepe beatae consequatur. In porro voluptates quaerat aut officiis ipsa optio at atque, assumenda qui ipsum quis provident autem reiciendis debitis. Ipsumoptio sed, dolor sit amet itaque saepe beatae consectetur adipisicing elit. Impedit, quos?</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, quos? Quos nostrum consectetur quidem ab quaerat libero perferendis voluptatem, alias sint possimus odio. Ratione explicabo optio sed architecto itaque saepe beatae consequatur. In porro voluptates quaerat aut officiis ipsa optio at atque, assumenda qui ipsum quis provident autem reiciendis debitis. Ipsumoptio sed, dolor sit amet itaque saepe beatae consectetur adipisicing elit. Impedit, quos?


Aside

<aside>
  <h3>Aside Header</h3>
  <ul>
    <li><a href=''>Lorem ipsum dolor</a></li>
    <li><a href=''>Lorem ipsum dolor</a></li>
    <li><a href=''>Lorem ipsum dolor</a></li>
    <li><a href=''>Lorem ipsum dolor</a></li>
  </ul>
</aside>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, expedita quod, ea magni minima commodi veniam aliquid, consequuntur quis soluta officiis at. Commodi reiciendis, expedita similique itaque adipisci molestiae architecto!