# Foundation 网格实例

2022-08-05 15:54 更新

## 三个均等列

### 实例

<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>

## 三个不均等列

### 实例

<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>

## 两个均等列

### 实例

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

## 两个不均等列

### 实例

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

## 修改列的顺序

### 实例

<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>

## 嵌套列

### 实例

<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>

## 混合：手机、桌面设备

Foundation 网格系统有三个列: `.small-*` (手机), `.medium-*` (平板), 和 `.large-*` (桌面设备)。这些类可以动态组合使用，让布局更加灵活：

### 实例

<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>

## 混合：手机、平板和桌面设备

### 实例

<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>

## 居中列

### 实例

<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>

## 列偏移量

### 实例

<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>

## 不完整列

### 实例

<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>

## 宽屏

### 实例

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

### 实例

<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>

App下载