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 的细节吧。