Skip to main content
x
Dartmouth-Hitchcock logo
Summer Flowers In This Section

Grid

Our grid is based on the Foundation 12-column grid, version 4.3.2. Find documentation on the Foundation site as well as details of other base components.

Large grid

Large grid breakpoint is 960 pixels. Play with the browser window width to see what happens as it shrinks and grows.

Height of content can vary.

This example shows (3) columns of equal width. Column math should add up to 12, hence we are using the large-4 class.

<div class="row">
    <div class="large-4 columns">
        <p>…</p>
    </div>
    <div class="large-4 columns">
        <p>…</p>
    </div>
    <div class="large-4 columns">
        <p>…</p>
    </div>
</div>

The following code yields the same result, but the small-12 class is unnecessary as that is the default.

<div class="row">
    <div class="large-4 small-12 columns">
        <p>…</p>
    </div>
    <div class="large-4 small-12 columns">
        <p>…</p>
    </div>
    <div class="large-4 small-12 columns">
        <p>…</p>
    </div>
</div>

The columns class allows floating divs side by side as columns, otherwise they would just stack. It has default left and right padding. The padding can be removed by adding a collapse class to the outer row.

Medium grid

Medium grid breakpoint is 768 pixels, so it displays as a single column below 768 pixels.

Play with the browser window width to see what happens as it shrinks and grows, and compare to large grid above.

In this example, the last two columns are equal width, medium-3, and the first column is wider, medium-6.

<div class="row">
    <div class="medium-6 columns">
        <p>…</p>
    </div>
    <div class="medium-3 columns">
        <p>…</p>
    </div>
    <div class="medium-3 columns">
        <p>…</p>
    </div>
</div>

Small grid

When used alone, small grid always stays the same. In this example, a 2-column grid. It also has a beary nice image.

I am not a cute kitten. I am a very large bear.


<div class="row">
    <div class="small-6 columns">
        <p>…</p>
    </div>
    <div class="small-6 columns">
        <p><img src="…"></p>
    </div>
</div>

Mix and match

1) This example mixes large and medium classes to control the responsive behaviour. Play with varying amounts of content in these blocks via the inspector.

2) Content arranges as a 2-column grid from 960 pixels wide and above, a 4-column grid from 768 to 959, and stacks to the default single column below 768 pixels wide.

3) Play with the browser window width again. This is a tricky example as varying amounts of content can effect layout.

4) Sorry no bear this time.


<div class="row">
    <div class="medium-3 large-6 columns">
        <p>…</p>
    </div>
    <div class="medium-3 large-6 columns">
        <p>…</p>
    </div>
    <div class="medium-3 large-6 columns">
        <p>…</p>
    </div>
    <div class="medium-3 large-6 columns">
        <p>…</p>
    </div>
</div>

Block grid

Large block grid

  • The block grid is useful when you just want evenly spaced blocks and can't or don't want to add additional row markup. This can be helpful when you're trying to make it easy for non-technical folks to add content, for example.
  • It's also useful when you have an odd number of blocks, or can't anticipate how many you will end up with. Blocks are always floated left, whereas in the normal grid the final one in a row is floated right. Note, there is no medium block grid. Play with your browser window to see what happens with the large block grid.
<ul class="large-block-grid-2">
    <li>…</li>
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

Small block grid

You may experience problems when using the small block grid by itself if the height of the content in your blocks is not uniform.

  • I am a caption. I am the only one. I am messing up your layout.

<ul class="small-block-grid-2">
    <li><img src="…"><p class="caption">…</p></li>
    <li><img src="…"></li>
    <li><img src="…"></li>
    <li><img src="…"></li>
    <li><img src="…"></li>
</ul>

Don't fear. This can be fixed by adding a large block class.

  • I am a caption. I am the only one. Now everything is copacetic.

<ul class="small-block-grid-2 large-block-grid-2">
    <li><img src="https://unsplash.it/450/350"><p class="caption">…</p></li>
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
</ul>

Mix and match

You can mix and match with the block grid too. Play with this example and see.

<ul class="small-block-grid-3 large-block-grid-5">
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
    <li><img src="https://unsplash.it/450/350"></li>
</ul>

0