AG 栅格的 HTML 和 CSS

AG 栅格的 html 文件结构和 Susy 1 创建该栅格 时保持一致：

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