Resource: https://get.foundation/sites/docs/xy-grid.html

UCT WebCMS uses parts of Zurb Foundation 6 CSS Framework

XY Grid

Note: Cells are highlighted here as a demonstration, to visualise the grid cells.

Basics

The structure uses .grid-x (horizontal), .grid-y (vertical) and .cell as the base. The cells split up the available space within the grid row.

<div class="grid-x">
  <div class="cell">full width cell</div>
  <div class="cell">full width cell</div>
</div>
<div class="grid-x">
  <div class="cell small-6">6 cells</div>
  <div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
  <div class="cell medium-6 large-4">12/6/4 cells</div>
  <div class="cell medium-6 large-8">12/6/8 cells</div>
</div>

 

full width cell
full width cell
6 cells
6 cells
12/6/4 cells
12/6/8 cells

Gutters

Gutter classes, .grid-margin-x / .grid-margin-y or/and .grid-padding-x / grid-padding-y can be used to activate margin or/and padding on the grid.

<div class="grid-x grid-margin-x">

  <div class="cell medium-6 large-4">12/6/4 cells</div>

  <div class="cell medium-6 large-8">12/6/8 cells</div>

</div>

<div class="grid-x grid-padding-x">

  <div class="cell medium-6 large-4">12/6/4 cells</div>

  <div class="cell medium-6 large-8">12/6/8 cells</div>

</div>

<div class="grid-x grid-margin-x grid-padding-x">

  <div class="cell medium-6 large-4">12/6/4 cells</div>

  <div class="cell medium-6 large-8">12/6/8 cells</div>

</div>

 

12/6/4 cells
12/6/8 cells
12/6/4 cells
12/6/8 cells
12/6/4 cells
12/6/8 cells

The following example uses a .medium-3 by .medium-9 layout and a combination of  .grid-margin-x and .grid-margin-y for spacing.

Headings used are <h3> with a class of .h5. This keeps the semantic markup correct while allowing for a visually smaller display.

<div class="grid-x grid-margin-x grid-margin-y">

   <div class="cell medium-3">
      <drupal-media></drupal-media>
   </div>

   <div class="cell medium-9">
      <h3 class="h5">Fusce tincidunt ligula eleifend</h3>
      <p>Lorem ipsum dolor ...  metus vehicula.</p>
   </div>

   <div class="cell medium-3">
      <drupal-media></drupal-media>
   </div>

   <div class="cell medium-9 grid-margin-y">
      <h3 class="h5">Fusce tincidunt ligula eleifend</h3>
      <p>Lorem ipsum dolor ...  metus vehicula.</p>
   </div>

   <div class="cell medium-3">
      <drupal-media></drupal-media>
   </div>

   <div class="cell medium-9">
      <h3 class="h5">Fusce tincidunt ligula eleifend</h3>
      <p>Lorem ipsum dolor ...  metus vehicula.</p>
   </div>

</div>

 

Placeholder for a profile picture

Fusce tincidunt ligula eleifend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt ligula eleifend justo tempor, sit amet accumsan sapien mollis. Ut sodales vulputate felis, vel vestibulum quam placerat tempus. Mauris non rhoncus dui. Morbi dignissim egestas rhoncus. Ut tempor, augue sed eleifend condimentum, lectus sem scelerisque augue, sit amet ullamcorper dolor dolor sed lectus. Ut elit tellus, suscipit in turpis in, molestie vehicula nisl. Integer et augue mauris. Nullam vitae nisl dictum, tincidunt mi a, tincidunt mauris. Nam tellus nisl, pharetra sit amet tempor et, cursus in lorem. Nulla venenatis nulla eget odio sodales, luctus hendrerit metus vehicula.
Placeholder for a profile picture

Fusce tincidunt ligula eleifend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt ligula eleifend justo tempor, sit amet accumsan sapien mollis. Ut sodales vulputate felis, vel vestibulum quam placerat tempus. Mauris non rhoncus dui. Morbi dignissim egestas rhoncus. Ut tempor, augue sed eleifend condimentum, lectus sem scelerisque augue, sit amet ullamcorper dolor dolor sed lectus. Ut elit tellus, suscipit in turpis in, molestie vehicula nisl. Integer et augue mauris. Nullam vitae nisl dictum, tincidunt mi a, tincidunt mauris. Nam tellus nisl, pharetra sit amet tempor et, cursus in lorem. Nulla venenatis nulla eget odio sodales, luctus hendrerit metus vehicula.
Placeholder for a profile picture

Fusce tincidunt ligula eleifend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt ligula eleifend justo tempor, sit amet accumsan sapien mollis. Ut sodales vulputate felis, vel vestibulum quam placerat tempus. Mauris non rhoncus dui. Morbi dignissim egestas rhoncus. Ut tempor, augue sed eleifend condimentum, lectus sem scelerisque augue, sit amet ullamcorper dolor dolor sed lectus. Ut elit tellus, suscipit in turpis in, molestie vehicula nisl. Integer et augue mauris. Nullam vitae nisl dictum, tincidunt mi a, tincidunt mauris. Nam tellus nisl, pharetra sit amet tempor et, cursus in lorem. Nulla venenatis nulla eget odio sodales, luctus hendrerit metus vehicula.
Closed

Auto Sizing

If the class .auto or .[size]-auto is added to the cell, it will take up the remaining space.

Multiple .auto cells will divide the left over space equally

Cells can be shrunk to the space their content needs, using the class .shrink or .[size]-shrink.

Shrink Class

A column can also be made to shrink, by adding the .shrink class. This means it will only take up the horizontal space its contents need.

<div class="grid-x  grid-margin-x grid-padding-x">

	<div class="cell shrink">Shrink!</div>
    
	<div class="cell">Expand!</div>
    
</div>

Responsive Adjustments

To adjust the space a cell takes up across different screen sizes you can use the [size] keyword with in the shrink, auto and numbered classes.
The size keywords are .small, .medium, .large, .xlarge and .xxlarge.

The below example

<div class="grid-x">
  <div class="cell large-auto">One</div>
  <div class="cell large-auto">Two</div>
  <div class="cell large-auto">Three</div>
  <div class="cell large-auto">Four</div>
  <div class="cell large-auto">Five</div>
  <div class="cell large-auto">Six</div>
</div>

 

One
Two
Three
Four
Five
Six

 

<div class="grid-x">
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">One</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Two</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Three</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Four</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Five</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Six</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Seven</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Eight</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Nine</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Ten</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Eleven</div>
  <div class="cell medium-6 large-4 xlarge-3 xxlarge-2">Twelve</div>
</div>

 

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve