Foundation grid instance
Below we have collected some commonly used examples of grids.
Three equal columns
This example demonstrates how to create three equal columns (33.3%/33.3%/33.3%), showing three columns on medium and large devices, automatically stacked on small devices:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 三个均等列</h2> <p>该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</p> <p>重置浏览器窗口大小查看效果。</p> <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> </body> </html>
Run Example»
Click the "Run Example" button to view the online example
Three unequal columns
This example demonstrates How to create three unequal columns (25%/50%/25%), display three columns on medium and large devices, automatically stacked on small devices:
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 三个不均等列</h2> <p>该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</p> <p>重置浏览器窗口大小查看效果。</p> <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> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Two equal columns
This example demonstrates how to create two equal columns (50%/50%). The ratio of the columns is always 50%/50% on small, medium and large devices:
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 两个均等列</h2> <p>该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%。</p> <p>重置浏览器窗口大小查看效果。</p> <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> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Two unequal columns
This example demonstrates how to create two unequal columns (33.3%/66.6%). The ratio of columns is always 33.3%/66.6% on small, medium and large devices:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 两个不均等列</h2> <p>该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%。</p> <p>重置浏览器窗口大小查看效果。</p> <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> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Modify the order of columns
Modify the order of columns by using the .small|medium|large-push-* and .small|medium|large-pull-* classes Sequence:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - Push 和 Pull</h2> <p>通过使用 <code>.small|medium|large-push-*</code> 和 <code>.small|medium|large-pull-*</code> 类来修改列的顺序:</p> <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> <p>Switched:</p> <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> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Nested columns
You can use nested grids (insert columns within columns):
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 嵌套列</h2> <p>列中插入列:</p> <div class="small-8 columns" style="background-color:yellow;">.small-8 <div class="row"> <div class="small-8 columns" style="background-color:lightcyan;">.small-8 Nested <div class="row"> <div class="small-8 columns" style="background-color:lightblue;">.small-8 Nested Again</div> <div class="small-4 columns" style="background-color:lightgreen;">.small-4</div> </div> </div> <div class="small-4 columns" style="background-color:lightgray;">.small-4</div> </div> </div> <div class="small-4 columns" style="background-color:pink;">.small-4</div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Mixed: mobile phone, desktop device
Foundation The grid system has three columns: .small-* (mobile), .medium-* (tablet), and .large-* (desktop) . These classes can be combined dynamically to make the layout more flexible:
Tips: Each class can be enlarged. If you want the width of small and large screen devices to be the same, you can set the specified .small-*.
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>混合：手机、桌面设备</h2> <p>重置浏览器窗口大小查看效果。</p> <div class="small-6 large-8 columns" style="background-color:yellow;">.small-6 .large-8</div> <div class="small-6 large-4 columns" style="background-color:pink;">.small-6 .large-4</div> </div> <div class="row"> <div class="small-2 large-4 columns" style="background-color:lightblue;">.small-2 .large-2</div> <div class="small-4 large-4 columns" style="background-color:yellow;">.small-4 .large-2</div> <div class="small-6 large-4 columns" style="background-color:lightgreen;">.small-6 .large-2</div> </div> <div class="row"> <div class="small-3 large-5 columns" style="background-color:lightcyan;">.small-3 .large-5</div> <div class="small-9 large-7 columns" style="background-color:lightgray;">.small-9 .large-7</div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Mixed: mobile, tablet and desktop devices
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>混合：手机、平板和桌面设备</h2> <p>重置浏览器窗口大小查看效果。</p> <div class="medium-6 large-8 columns" style="background-color:red;">.medium-6 .large-8</div> <div class="medium-6 large-4 columns" style="background-color:yellow;">.medium-6 .large-4</div> </div> <div class="row"> <div class="small-4 medium-3 large-7 columns" style="background-color:pink;">.small-4 .medium-3 .large-7</div> <div class="small-4 medium-6 large-3 columns" style="background-color:lightgreen;">.small-4 .medium-6 .large-3</div> <div class="small-4 medium-3 large-2 columns" style="background-color:orange;">.small-4 .medium-3 .large-2</div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Centered Column
To center a column, you can use the .small-centered class. Medium and large devices can inherit the centering of small devices, but you need to set the centering class .large-centered on large devices.
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 居中列</h2> <p>列居中可以使用 <code>.small-centered</code> 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类<code>.large-centered</code> 。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="small-4 small-centered columns" style="background-color:yellow;">small-4 small-centered</div> </div> <div class="row"> <div class="small-6 small-centered columns" style="background-color:pink;">small-6 small-centered</div> </div> <div class="row"> <div class="small-6 large-centered columns" style="background-color:lightgreen;">small-6 large-centered</div> </div> <div class="row"> <div class="small-8 small-centered large-uncentered columns" style="background-color:yellow;">small-8 small-centered large-uncentered</div> </div> <div class="row"> <div class="small-10 small-centered columns" style="background-color:pink;">small-10 small-centered</div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Column offset
You can use the .large-offset-* (or .small-offset-*) class to set the column to the right shift. The number of columns in the left margin is controlled using the * sign:
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>网格 - 偏移量</h2> <p>可以使用 <code>.large-offset-*</code> (或 <code>.small-offset-*</code>) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:</p> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-11 columns" style="background-color:pink;">11</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-10 large-offset-1 columns" style="background-color:pink;">10, offset 1</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-9 large-offset-2 columns" style="background-color:pink;">9, offset 2</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-8 large-offset-3 columns" style="background-color:pink;">8, offset 3</div> </div> </body> </html>
Run Example»
Click "Run" Example" button to view online examples
Incomplete columns
If the sum of the number of columns in a row is not 12, Foundation will automatically float the last column to the right and use Blank to fill the remaining columns.
Optional .end Class is used to set the elements of the last column to float to the left:
Example
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <h2>不完整列</h2> <p>如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。</p> <p>可选项 <code>.end</code> 类用于设置最后一列的元素向左边浮动:</p> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> </div> <div class="row"> <div class="medium-3 columns" style="background-color:pink;">.medium-3</div> <div class="medium-3 columns" style="background-color:pink;">.medium-3</div> <div class="medium-3 columns end" style="background-color:pink;">.medium-3 .end</div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Widescreen
Grid(.row) The maximum size (max-width) is 62.5rem. On widescreen devices the size may be larger than 62.5rem, so that the column does not completely fill the page, even if the width is set to 100%. But we can set a new max-width through CSS:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
<style>
.example {
max-width: 100%;
}
</style>
</head>
<body>
<h2>Foundation 网格</h2>
<p>默认情况下，网格最大(<code>.row</code>) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度， 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:</p>
<hr>
<div class="row">
<p>基本行 (max-width:62.5rem):</p>
<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>
<br>
<div class="row example">
<p>行的max-width为 100% :</p>
<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>
<br>
</body>
</html>Run instance»
Click" Run instance" button to view the online instance
If you want to use the default max-width, but the background color needs to span the entire page, then you use .row## on the container element # Class and specify the background color you need:
Instance
Run Instance»Click "Run Instance" " button to view online examples
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <h2>Foundation 网格</h2> <p>外层容器使用类 .row，并指定背景颜色跨越整个页面：</p> <div class="row" style="background-color:tomato;padding:25px;"> <p>Default Row with a tomato color and padding:</p> <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> <br> <div class="container" style="background-color:coral;padding:25px;"> <div class="row"> <p>Row with container:</p> <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> <br> </body> </html>
Run Instance»Click "Run Instance" " button to view online examples
#
