2.1 網格布局
在semantic-ui中提供了16個網格，使用class="column"，當然也可以通過數字來表示當前網格大小。
在Semantic-UI中定義的網格一共16個，可以設置不同大小的網格，同時也可以使用數字來指定單個網格的大小。
示例：定義16個網格
- 16個網格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI</title>
<!--使用CDN導入js和css文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div class="ui grid">
<div class="column" style="background-color: red">1</div>
<div class="column" style="background-color: green">2</div>
<div class="column" style="background-color: red">3</div>
<div class="column" style="background-color: green">4</div>
<div class="column" style="background-color: red">5</div>
<div class="column" style="background-color: green">6</div>
<div class="column" style="background-color: red">7</div>
<div class="column" style="background-color: green">8</div>
<div class="column" style="background-color: red">9</div>
<div class="column" style="background-color: green">10</div>
<div class="column" style="background-color: red">11</div>
<div class="column" style="background-color: green">12</div>
<div class="column" style="background-color: red">13</div>
<div class="column" style="background-color: green">14</div>
<div class="column" style="background-color: red">15</div>
<div class="column" style="background-color: green">16</div>
</div>
</body>
</html>
效果圖：
- 4-8-4網格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI</title>
<!--使用CDN導入js和css文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div class="ui grid">
<div class="four wide column" style="background-color: #00b5ad">4格</div>
<div class="eight wide column" style="background-color: #2bbbff">8格</div>
<div class="four wide column" style="background-color: #5a30b5">4格</div>
</div>
</body>
</html>
效果圖：
示例：網格的內嵌
在Semantic-UI中，網格內嵌的時候內嵌在某一個網格中的柵格總共也是16個格子，並不是上一級柵格的個數。也就是是說如果在一個8格的山各種內嵌柵格，那么這個8格的柵格也會被分成16個柵格，內嵌的柵格如果不滿16格，那么內嵌的柵格只覆蓋一部分，其他部分還是上一級柵格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI</title>
<!--使用CDN導入js和css文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<!-- 網格內嵌 -->
<div class="ui grid">
<div class="four wide column" style="background-color: #00b5ad">4格</div>
<div class="eight wide column" style="background-color: #2bbbff">
<div class="ui grid">
<div class="eight wide column" style="background-color: #5a30b5">8格</div>
<div class="eight wide column" style="background-color: #9f3a38">8格</div>
</div>
</div>
<div class="four wide column" style="background-color: #5a30b5">4格</div>
</div>
</body>
</html>
效果圖：
