AG 柵格的 html 文件結構和?[Susy 1 創建該柵格](http://www.zell-weekeat.com/a-complete-tutorial-to-susy/)?時保持一致：
~~~
<div class="container">
<h1>The 10 column complex nested grid AG test</h1>
<div class="ag ag1">
<h2>AG 1</h2>
</div>
<!-- /ag1 -->
<!-- ag4 to ag7 are nested within ag2.-->
<div class="ag ag2">
<h2>AG 2</h2>
<div class="ag ag4">
<h2>AG 4</h2>
</div>
<div class="ag ag5">
<h2>AG 5</h2>
</div>
<div class="ag ag6">
<h2>AG 6</h2>
</div>
<!-- ag8, ag9 and ag10 are nested within ag7 -->
<div class="ag ag7">
<h2>AG 7</h2>
<div class="ag ag8">
<h2>AG 8</h2>
</div>
<div class="ag ag9">
<h2>AG 9</h2>
</div>
<div class="ag ag10">
<h2>AG 10</h2>
</div>
</div>
<!-- /ag7 -->
</div>
<!-- /ag2 -->
<div class="ag ag3">
<h2>AG 3</h2>
</div>
<!-- /ag3 -->
</div>
<!-- /container -->
~~~
簡單地說，如果有元素在另一個元素內部，那么你就要將其嵌套到那個元素中。
在本例中，`AG 4`?到?`AG 7`?應該嵌套到?`AG 2`?中，而?`AG 8`，`AG 9`?和?`AG 10`?應該嵌套到?`AG 7`?中。
CSS 文件也和上個版本保持一致，如下所示：
~~~
/**
* Styles for AG grids & Container
*/
.container {
background-color: #fbeecb;
}
.ag1, .ag3 {
background-color: #71dad2;
}
.ag2 {
background-color: #fae7b3;
}
.ag4,.ag5,.ag8,.ag9 {
background-color: #ee9e9c;
}
.ag6 {
background-color: #f09671;
}
.ag7 {
background-color: #f6d784;
}
.ag10 {
background-color: #ea9fc3;
}
/**
* Text Styles
*/
h2 {
text-align: center;
font-size: 1rem;
font-weight: normal;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
}
~~~
現在，萬事俱備，讓我們深入了解一些 Susy 的細節吧。
