8.37. Foundation grid instance

Below we collect some examples that are commonly used in the grid.

8.37.1. Three equal series ¶

This example demonstrates how to create three equal columns (33.3% and 33.3%), display three columns on medium and large devices, and stack them automatically on small devices:

Example ¶

<div class="row">
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
</div>

尝试一下 »

8.37.2. Three unequal columns ¶

This example demonstrates how to create three unequal columns (25%, 50%, 25%, 25%), display three columns on medium and large devices, and stack automatically on small devices:

Example ¶

<div class="row">
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>.medium-6</p>
  </div>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
</div>

尝试一下 »

8.37.3. Two equal columns ¶

This example demonstrates how to create two equal columns (50% plank 50%), and the proportion listed on small, medium, and large devices is always 50% Universe 50%:

Example ¶

<div class="row">
  <div class="small-6 columns" style="background-color:yellow;">
    <p>.small-6</p>
  </div>
  <div class="small-6 columns" style="background-color:pink;">
    <p>.small-6</p>
  </div>
</div>

尝试一下 »

8.37.4. Two unequal columns ¶

This example demonstrates how to create two unequal columns (33.3% plank 66.6%), and the proportion listed on small, medium, and large devices is always 33.3% Universe 66.6%:

Example ¶

<div class="row">
  <div class="small-8 columns" style="background-color:yellow;">
    <p>.small-8</p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>.small-4</p>
  </div>
</div>

尝试一下 »

8.37.5. Modify the order of the columns ¶

By using the .small|medium|large-push-* And .small|medium|large-pull-* Class to modify the order of the columns

Example ¶

<div class="row">
  <div class="small-4 small-8-push columns"
style="background-color:yellow;">
    <p>.small-4 .small-8-push</p>
  </div>
  <div class="small-8 small-4-pull columns"
style="background-color:pink;">
    <p>.small-8 .small-4-pull</p>
  </div>
</div>

尝试一下 »

8.37.6. Nested column ¶

You can use a nested grid (insert columns in columns):

Example ¶

<div class="row">
  <div class="small-8 columns">.small-8
    <div class="row">
      <div class="small-8 columns">.small-8 Nested
        <div class="row">
          <div class="small-8 columns">.small-8 Nested Again</div>
          <div class="small-4 columns">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns">.small-4</div>
</div>

尝试一下 »

8.37.7. Hybrid: mobile phones, desktop devices ¶

The Foundation grid system has three columns: .small-* (mobile phone) .medium-* (flat panel), and .large-* (desktop devices). These classes can be combined dynamically to make the layout more flexible:

提示： Each class can be zoomed in, and you can specify it if you want the width of both small and large screen devices to be the same. .small-* .

Example ¶

<div class="row">
  <div class="small-6 large-8 columns">.small-6 .large-8</div>
  <div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns">.small-2 .large-2</div>
  <div class="small-4 large-4 columns">.small-4 .large-2</div>
  <div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
  <div class="small-3 large-5 columns">.small-3 .large-5</div>
  <div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>

尝试一下 »

8.37.8. Hybrid: mobile, tablet and desktop devices ¶

Example ¶

<div class="row">
  <div class="medium-6 large-8 columns">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3
.large-7</div>
  <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6
.large-3</div>
  <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3
.large-2</div>
</div>

尝试一下 »

8.37.9. Center column ¶

Can be used in the list .small-centered Class. Medium and large devices can inherit the center of small devices, but you need to set the center class on large devices .large-centered .

Example ¶

<div class="row">
  <div class="small-4 small-centered columns">small-4
small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns">small-6
small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">small-6
large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns">small-8
small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns">small-10
small-centered</div>
</div>

尝试一下 »

8.37.10. Column offset ¶

Can be used .large-offset-* (or .small-offset-* Class sets the column to the right The number of columns in the left outer margin is controlled by the* sign:

Example ¶

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

尝试一下 »

8.37.11. Incomplete column ¶

If the sum of the columns in a row is not 12, Foundation automatically floats the last column to the right and fills the remaining columns with whitespace.

Optional .end Class is used to set the elements of the last column to float to the left

Example ¶

<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns end">.medium-3 .end</div>
</div>

尝试一下 »

8.37.12. Wide screen ¶

Grid ( .row The maximum size (max-width) is 62.5rem On widescreen devices, the size may be larger than 62.5rem, so the columns cannot fully fill the page, even if the width is set to 100%. But we can set the new max-width through CSS:

Example ¶

<style>
.row {
    max-width: 100%;
}
</style>

尝试一下 »

If you want to use the default max-width, but the background color needs to span the entire page, you use the .row Class and specify the background color you want:

Example ¶

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns"
style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns"
style="background-color:pink;">.small-6</div>
  </div>
</div>

尝试一下 »