AG 栅格的 HTML 和 CSS
最后更新于：2022-04-01 01:53:02
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 的细节吧。