3.1 定义容器
在主流的前端框架中都会有容器的概念，但是在Semantic-UI中，如果要定义容器需要通过class="ui container"，定义容器后，浏览器会根据不同的像素值判断当前网格的显示大小。
实例：定义容器
通过定义容器可以发现，定义完容器的页面两边会有边距。没有定义容器的在浏览器中是百分之百的显示。
官方文档关于容器显示的说明：
<!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 container">
<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>
</div>
</body>
</html>
效果图：
3.2 小结
在使用Semantic-UI框架的时候，可以使用ui container来定义容器，定义完容器的页面会有边距，可以通过ui grid定义网格达到布局的效果。通过这些操作可以很方便的编写页面的布局。