Grid

The grid is a powerful layouting tool. You can use grids to arrange your page frame, position content teasers, arrange link lists, and basically anything in between. The grid is also set up responsive to allow different layouts on different devices.

We recommend you use grid-flex for all your grid needs since it takes care of many edge cases that you might encounter. Still, it is not a silver bullet. When migrating to it, please be aware that grid-flex does not work with clear and float. Also, grid introduces a margin-bottom-l by default, while with grid-flex, you'll have to add that manually if you need it. Also note that in the flex grid, grid items no longer have an implicit width of 100%. If you want your elements to be 100% wide, please apply the one-whole class explicitly.

For a quick overview over what the flexbox model does, we recommend the excellent Complete Guide to Flexbox on CSS-Tricks.

  1. Grid Wrapper
  2. Gutters
  3. Grid Items
  4. Sizes
  5. Responsive Grids
  6. Nesting Grids
  7. Pushing
  8. Alignment (grid-flex only)
    1. Vertical Alignment
    2. Horizontal Alignment
  9. Ordering (grid-flex only)
  10. Filled-up Grid Rows (grid-flex only)
  11. Grid Items with Fixed Widths (grid-flex only)

Grid Wrapper

Grids are enclosed in a wrapper that contains the grid's individual columns and determines the offset (gutters) between single columns.

Grid wrapper
<div class="grid grid-flex margin-bottom-l"></div>

Note: Be sure to apply no custom styling to a grid container or its grid items. While this may work in some cases, it will, more likely than not, result in broken layouts due to the way that the grid items are being positioned beneath the hood. Use wrappers or children instead for borders, backgrounds, paddings, etc.

Gutters

The grid gutter determines whether the content columns of a grid should take up all of the available space, or be separated by horizontal and/or vertical white space.

The syntax for gutter classes is gutter-<side>-<size> (analogous to Spacings).

Grids with different gutters (Grid content added for demonstrational purposes) 
<div class="grid grid-flex margin-bottom-l"></div>

<div class="grid grid-flex gutter"></div>

<div class="grid grid-flex gutter-s"></div>

<div class="grid grid-flex gutter-horizontal-xl"></div>

<div class="grid grid-flex gutter-vertical-l"></div>

Grid Items

Grid items are the elements that form a grid's individual content columns.

Grid with two grid items

				

				

					

						

							

								

							

							

								

							

						

					

				

			

		

	

	
	

		
Sizes

		

			You can use the global width classes to split your grid columns into fractions of two, three, four, five,
			six, eight, ten, and twelve.
		

		

			Please see the Widths section for a full explanation.
		

		
		

			

				Grid with three ⅓-wide columns.
				(Backgrounds added for demonstrational purposes)
			

			

				


<div class="grid grid-flex">
    <div class="grid-item one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-2" style="height:1.5em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
</div>


				

				

					

						

							

								

							

							

								

							

							

								

							

						

					

				

			

		

	

	
	

		
Responsive Grids

		

			The responsive grid has three states:
		

		
    
			
  1. 
				palm for palm-held devices like mobile phones, smart phones, small tablets, smart watches etc.;
			
    2. 
			
  2. 
				lap for lap-held devices like larger tablets, iPads, netbooks;
			
    3. 
			
  3. 
				desk for desk-top computers, laptops, and generally everything with a screen over 1024 pixels wide.
			
    4. 
		

		

			These states can be explicitly targeted to achieve different layouts for different devices.
		

		
		

			
Grid with state-specific layouts

			

				


<div class="grid grid-flex">
    <div class="grid-item palm-one-whole lap-one-half desk-one-third">
        <div class="demo-box-1" style="height:1.5em;"></div>
    </div>
    <div class="grid-item palm-one-whole lap-one-half desk-one-third">
        <div class="demo-box-2" style="height:1.5em;"></div>
    </div>
    <div class="grid-item palm-one-whole lap-one-whole desk-one-third">
        <div class="demo-box-3" style="height:1.5em;"></div>
    </div>
</div>


				

				

					

						

							

								

							

							

								

							

							

								

							

						

					

				

			

		

		

			Please see Widths for a full explanation.
		

	

	
	

		
Nesting Grids

		

			Grids can be infinitely nested inside each other. You can also mix and match grids with and without gutters, you can change
			the amount of items in each grid, and so forth. Just keep in mind to wrap each grid in its own grid-item.
		

		
		

			

				Nested grids
				(Backgrounds added for demonstrational purposes.)
			

			

				


<div class="grid grid-flex margin-bottom-l gutter-m">
  <div class="grid-item two-thirds">
    Column 1
    <div class="grid grid-flex margin-bottom-l gutter-s">
      <div class="grid-item one-half">
        Column 1.1
      </div>
      <div class="grid-item one-half">
        Column 1.2
        <div class="grid grid-flex margin-bottom-l gutter-xs">
          <div class="grid-item one-half">
            Column 1.2.1
          </div>
          <div class="grid-item one-half">
            Column 1.2.2
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item one-third">
    Column 2
  </div>
</div>


				

				

					

						

							

								

									Column 1
									

										

											

												Column 1.1
											

										

										

											

												Column 1.2
												

													

														

															Column 1.2.1
														

													

													

														

															Column 1.2.2
														

													

												

											

										

									

								

							

							

								

									Column 2
								

							

						

					

				

			

		

	

	
	

		
Pushing

		

			Grid items can be pushed to the right to align elements or to create whitespace. You can do this by using the “push” classes.
		

		

			Push classes follow the syntax <state>-push-<width-class>, where “state” is one of the usual state
			prefixes, i.e. “palm”, “lap”, or “desk”, and “width-class” is one of the width classes
			mentioned above.
		

		

			For example: palm-push-two-thirds will push a grid item to the right by two thirds, but only on palm-sized devices.
		

		
		

			

				Pushed grid items
				(Backgrounds added for demonstrational purposes.)
			

			

				


<div class="grid grid-flex gutter-xs">
    <div class="grid-item two-thirds">
        <div class="demo-
	box-1" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-2" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third">
        <div class="demo-box-1" style="min-height: 2em;"></div>
    </div>
    <div class="grid-item one-third push-one-third">
        <div class="demo-box-2" style="min-height: 2em;"></div>
    </div>
</div>


				

				

					

						

							

								

							

							

								

							

							

								

							

							

								

							

						

					

				

			

		

	


	

		
Alignment (grid-flex only)

		

			With flex grids, you can specify declaratively how elements should be aligned with each other, leaving all related styling and calculations to the browser.
		

		
		

			
Vertical Alignment

			

				You can configure vertical alignment either on the container, where it applies to all grid items, or on individual grid items.
			

			

				To align items, apply one of the grid-align-<alignment> classes, where “<alignment>” is one of start, end, center, baseline, or stretch (default).
			

			

				Vertical alignment applies to both single- and multi-row grids.
			

			
			

				
Flex grid with vertical alignment on all items

				

					
					

						


<div class="grid grid-flex
            ">
</div>


						

						

							

								

									

										 

										 
									

								

								

									

										 

										 

										 

										 
									

								

								

									

										 

										 

										 
									

								

								

									

										 
									

								

							

						

					

				

			

			
			

				
Flex grid with vertical alignment on individual item

				

					
					

						


<div class="grid-item grid-align-center">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item
                "></div>
</div>


						

						

							

								

									

										 

										 
									

								

								

									

										 

										 

										 

										 
									

								

								

									

										 

										 

										 
									

								

								

									

										 
									

								

							

						

					

				

			

		

		
		

			
Horizontal Alignment (grid-flex only)

			

				You can also choose how grid content should be justified (that is, horizontally aligned) when there is left-over whitespace in a row.
			

			

				To justify grid items, apply one of the grid-justify-<alignment> classes to the grid container, where “<alignment>” is one of start (default), center, end, space-between, or space-around.
			

			 
			

				
Flex grid with horizontal alignment

				

					
					

						


<div class="grid grid-flex gutter
            ">
</div>


						

						

							

								

									

										

									

									

										

									

									

										

									

									

										

									

								

							

						

					

				

			

		

	

	
	

		
Ordering (grid-flex only)

		

			In flex grids, you can decide on the order in which individual grid items should be rendered.
		

		

			This reordering takes place entirely in CSS, which allows you to structure your HTML in whichever way makes the most sense, and then adjust the layout as needed.
		

		

			The ordering classes are defined as <state->order-<index>-<direction>, where “<index>” is an index from one to five, and “<direction>” is either up or down.
		

		

			By default, all grid items start with the default index of zero. An item is moved further up or down the higher the index gets.
		

		

			Between elements with the same index, markup order is preserved.
		

		
		

			
Grid items with switched order

			

				


<div class="grid grid-flex gutter">
    <div class="grid-item one-whole">
        <div class="demo-box-1">Box 1 (default)</div>
    </div>
    <div class="grid-item one-whole">
        <div class="demo-box-1">Box 2 (default)</div>
    </div>
    <div class="grid-item one-whole">
        <div class="demo-box-1">Box 3 (default)</div>
    </div>
    <div class="grid-item one-whole order-one-up">
        <div class="demo-box-2">Box 4 (one-up)</div>
    </div>
    <div class="grid-item one-whole order-one-down">
        <div class="demo-box-3">Box 5 (one-down)</div>
    </div>
    <div class="grid-item one-whole order-two-up">
        <div class="demo-box-4">Box 6 (two-up)</div>
    </div>
    <div class="grid-item one-whole order-one-down">
        <div class="demo-box-3">Box 7 (one-down)</div>
    </div>
    <div class="grid-item one-whole order-one-down">
        <div class="demo-box-3">Box 8 (one-down)</div>
    </div>
</div>


				

				

					

						

							

								
Box 1 (default)

							

							

								
Box 2 (default)

							

							

								
Box 3 (default)

							

							

								
Box 4 (one-up)

							

							

								
Box 5 (one-down)

							

							

								
Box 6 (two-up)

							

							

								
Box 7 (one-down)

							

							

								
Box 8 (one-down)

							

						

					

				

			

		

		
		

			The rendering order can also be defined for individual device states using the usual prefixes.
		

		
		

			

				Grid items with switched order – state-specific
				(Switch between palm and lap/desk states to see the effect.)
			

			

				


<div class="grid grid-flex gutter">
    <div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-2down desk-order-2down">
        <div class="demo-box-1" style="min-height: 4em;">
            First in the markup
        </div>
    </div>
    <div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-1down desk-order-1down">
        <div class="demo-box-2" style="min-height: 4em;">
            Second in the markup
        </div>
    </div>
    <div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-3down desk-order-3down">
        <div class="demo-box-3" style="min-height: 4em;">
            Third in the markup
        </div>
    </div>
</div>


				

				

					

						

							

								

									First in the markup
								

							

							

								

									Second in the markup
								

							

							

								

									Third in the markup
								

							

						

					

				

			

		

	

	
	

		
Filled-up Grid Rows (grid-flex only)

		

			By default, if a grid row is not completely filled up, it will leave over whitespace.
		

		

			Applying the grid-fill-rows modifier to a flex grid container will make its grid items split up any left-over whitespace between themselves.
		

		
		

			
Grid rows with and without left-over whitespace

			

				
				

					


<div class="grid grid-flex ">
    <div class="grid-item one-fourth">
        <div class="demo-box-1">1/4</div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-2">1/4</div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-3">1/4</div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-4">1/4</div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-4">1/4</div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-1">1/4</div>
    </div>
</div>


					

					

						

							

								
1/4

							

							

								
1/4

							

							

								
1/4

							

							

								
1/4

							

							

								
1/4

							

							

								
1/4

							

						

					

				

			

		

	

	
	

		
Grid Items with Fixed Widths (grid-flex only)

		

			While regular grids are restricted to fractional widths, flex grids allow you to apply fixed absolute widths to individual columns without breaking the fluidity of the grid as a whole.
		

		

			In a grid with filled-up grid rows, apply the grid-item-fixed-width modifier class to a grid item that should remain at a fixed width, regardless of the space available.
		

		

			You can either force a specific width directly on the grid item, or leave the width definition away entirely, in which case the grid item will end up exactly as wide as its content requires.
		

		
		

			

				Fluid grid with fixed-width grid items
				(Resize the browser window to see how the fluid grid items flow around the fixed ones.)
			

			

				


<div class="grid grid-flex grid-fill-rows gutter-xs">
    <div class="grid-item grid-item-fixed-width" style="width: 6em;">
        <div class="demo-box-1">
            Fixed: 6em
            <span class="block fa">&#xf118; &#xf118; &#xf118; &#xf118; &#xf118; &#xf118; &#xf118;</span>
        </div>
    </div>
    <div class="grid-item three-fifths">
        <div class="demo-box-2">
            Fluid: 3/5
        </div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-2">
            Fluid: 1/4
        </div>
    </div>
    <div class="grid-item grid-item-fixed-width">
        <div class="demo-box-1">
            Fixed: Content
            <span class="block fa">&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;</span>
        </div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-2">
            Fluid: 1/4
        </div>
    </div>
</div>


				

				

					

						

							

								

									Fixed: 6em
									      
								

							

							

								

									Fluid: 3/5
								

							

							

								

									Fluid: 1/4
								

							

							

								

									Fixed: Content
									
								

							

							

								

									Fluid: 1/4