Grid Sizes

Our fluid Variable Grid System is composed of a 12 column responsive grid layout. The system is based on the 960 Grid System. This section illustrates Teleflora's grid sizes and syntax.

1 / 1
98.0%

1 / 2
48.0%

1 / 2
48.0%

1 / 3
31.333%

1 / 3
31.333%

1 / 3
31.333%

1 / 4
23.0%

1 / 4
23.0%

1 / 4
23.0%

1 / 4
23.0%

1 / 6
14.667%

1 / 6
14.667%

1 / 6
14.667%

1 / 6
14.667%

1 / 6
14.667%

1 / 6
14.667%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

1 / 12
6.33%

  <!-- grid container starts -->
  <div class="container_4 d-container_12">
    <div class="grid-2 d-grid_6">
      Content...
    </div>
    <div class="grid-2 d-grid_6">
      Content...
    </div>
  </div>
 <!-- grid container ends -->

Grid Gutters

Grid columns have a 1% margin on either side that results in a 2% gutter between columns and a 1% gutter on the grid edges. Even though the columns are fluid, the gutters remain constant.

1 / 4

1 / 4

1 / 4

1 / 4

Mixed / Nested Grids

The grid layout is easily extended by nesting and mixing different column sizes up to 12 columns wide.

1 / 4

1 / 4

1 / 2

1 / 4

3 / 4

1 / 4

1 / 2

1 / 2

3 / 4

  <!-- grid container starts -->
  <div class="container_4 d-container_12">
    <div class="grid_1 d-grid_3">
      Content...
    </div>
    <div class="grid_1 d-grid_3">
      Content...
    </div>
    <div class="grid_2 d-grid_6">
      Content...
   </div>
 </div>
 <!-- grid container ends -->
 <!-- grid container starts -->
 <div class="container_4 d-container_12">
   <div class="grid_1 d-grid_3">
       Content...
   </div>
   <div class="grid_3 d-grid_9">
     <div class="grid_2 d-grid_6">
       Content...
     </div>
     <div class="grid_2 d-grid_6">
       Content...
     </div>
   </div>
 </div>
 <!-- grid container ends -->