Grid System

Media queries

// Small screens @media only screen { }
// Medium screens @media only screen and (min-width: 40.063em) { }
// Large screens @media only screen and (min-width: 64.063em) { }
// XLarge screens @media only screen and (min-width: 90.063em) { }
// XXLarge screens @media only screen and (min-width: 120.063em) { }

The Grid System

The grid system has two elements: rows and columns.

Rows contain columns. Columns determine the width of your content.

Assign columns a number to give them a size. (one, two, three... twelve)

The grid can contain a maximum of 12 columns. The width of each column is not a fixed size, but a percentage of its parent container.

Columns within a row cannot add up to more than twelve. But they can add up to less than twelve.

Twelve is the equivalent to 100%.

<div class="row">
	<div class="large-3 columns">
		<div class="panel">
			<p>Content A (two)</p>
		</div>
	</div>
	<div class="large-3 columns">
		<div class="panel">
			<p>Content B (two)</p>
		</div>
	</div>
</div>

---

---

The last column is always floated right. To override this, add class="end" to the column

---

Column sizes and Device sizes

Column sizes can be added to almost any element, but it is recommended to avoid this and place elements inside rows/columns instead. Elements will keep these proportions as they resize.

This is a table (large-8 columns)

Month	Savings	Expenses	Growth
Lorem ipsum	$400	$100	5%
Lorem ipsum	$400	$100	5%

---

In order to target a column width on a particular screen size, add extra classes with a number for that screen size.

For example:

Important: If you do not specify a size for smaller screen sizes, they will automatically be 12 columns wide on small devices. Medium-sized devices will inherit the large size set.

<div class="panel large-6 medium-8 small-10 columns">
<p>This is 6 columns wide on a large screen, 8 columns wide on a medium (tablet) screen, and 10 columns wide on a small screen (phone). (large-6 medium-8 small-10 columns)</p>
</div>

---

Nesting

Columns can contain additional rows, like adding tables inside of a TD. This allows for more complex and refined layouts. In most cases you should be able to get your desired layout using un-nested columns.

---

Elements will use the percentage of their parent element. If the parent element has a width set, the child will use a percentage of that number. Foundation calls this 'Nesting'.

---

OffSets

Offsets allow you to create space between columns. Offsets count in your column math. Offsets + columns cannot exceed twelve.

<div class="row">
<div class="large-3 columns">
<div class="panel">
<p>Content A (large-3)</p>
</div>
</div>
<div class="large-3 columns large-offset-1">
<div class="panel">
<p>Content B (large-3 large-offset-1)</p>
</div>
</div>
<div class="large-3 columns large-offset-1 end">
<div class="panel">
<p>Content C (large-3 large-offset-1)</p>
</div>
</div>
</div>

---

Centered Columns

You can center single columns within a row. But you can only do this if there is one column in the row. Note that this does not center the content. By applying "small-centered", it will centre the column on small devices (mobile phones) and up. Medium will centre the column on tablets and up, Large will only be centered on desktops and large screens.

You can uncentre a column on a particular screen size with "large-uncentered", "medium-uncentered", etc.

<div class="row">
<div class="large-2 columns small-centered">
<div class="panel">
<p>Content A (large-2 small-centered)</p>
</div>
</div>
</div>
<div class="row">
<div class="large-5 columns small-centered">
<div class="panel">
<p>Content B (large-5 small-centered)</p>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns small-centered">
<div class="panel">
<p>Content C (large-9 small-centered large-uncentered)</p>
</div>
</div>
</div>

---

Visibility

Foundation supports a large number of classes for hiding or showing content on different screen sizes.

We generally use two of these options:

• show-for-small
• hide-for-small

<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Always display this panel</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel hide-for-small">
<p>Hide this panel on mobile</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel callout show-for-small">
<p>Only show this panel on mobile</p>
</div>
</div>
</div>

---

Floating Elements

You can use left or right to float elements.

---

In the Middle Ages, those who attacked castles used trebuchets, military engines capable of firing missiles with frightening force. In this section, view an actual trebuchet NOVA built, and construct and fire one of your own online. Also, find out what other weapons were used and what daily life was like in a medieval castle.

---

In the Middle Ages, those who attacked castles used trebuchets, military engines capable of firing missiles with frightening force. In this section, view an actual trebuchet NOVA built, and construct and fire one of your own online. Also, find out what other weapons were used and what daily life was like in a medieval castle.

---

Block Grid

Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, use block grid.

Here's how

• add a class to tell foundation how many columns you want ("large-block-grid-4")
• add another class to tell foundation how many columns you want for tabletes ("medium-block-grid-3")
• add another class to tell foundation how many columns you want for mobile ("small-block-grid-2")

• Content A

• Content B

• Content C

• Content D

• Content E

• Content F

<ul class="large-block-grid-4 medium-block-grid-3 small-block-grid-2">
<li><div class="panel"><p>Content A</p></div></li>
<li><div class="panel callout"><p>Content B</p></div></li>
<li><div class="panel"><p>Content C</p></div></li>
<li><div class="panel callout"><p>Content D</p></div></li>
<li><div class="panel"><p>Content E</p></div></li>
<li><div class="panel callout"><p>Content F</p></div></li>
</ul>

Foundation CSS system

TRU uses Foundation v5 for layout.
» Foundation Documentation » Foundation Grid system » Foundation Media Queries