网格

点击查看代码

  * {
            box-sizing: border-box;
          }
          <g-row class="demoRow">
      <g-col span="8" class="demoCol">8</g-col>
      <g-col span="8" class="demoCol">8</g-col>
      <g-col span="8" class="demoCol">8</g-col>
    </g-row>
    <g-row class="demoRow">
      <g-col span="6" class="demoCol">6</g-col>
      <g-col span="6" class="demoCol">6</g-col>
      <g-col span="6" class="demoCol">6</g-col>
      <g-col span="6" class="demoCol">6</g-col>
    </g-row>
    <g-row class="demoRow">
      <g-col span="4" class="demoCol">4</g-col>
      <g-col span="4" class="demoCol">4</g-col>
      <g-col span="4" class="demoCol">4</g-col>
      <g-col span="4" class="demoCol">4</g-col>
      <g-col span="4" class="demoCol">4</g-col>
      <g-col span="4" class="demoCol">4</g-col>
    </g-row>
    <g-row class="demoRow">
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
      <g-col span="2" class="demoCol">2</g-col>
    </g-row>

点击查看代码

        * {
            box-sizing: border-box;
          }
          <g-row class="demoRow" gutter="10">
            <g-col span="8">
              <div class="demoCol">8</div>
            </g-col>
            <g-col span="8">
              <div class="demoCol">8</div>
            </g-col>
            <g-col span="8">
              <div class="demoCol">8</div>
            </g-col>
          </g-row>
          <g-row class="demoRow" gutter="10">
            <g-col span="6">
              <div class="demoCol">6</div>
            </g-col>
            <g-col span="6">
              <div class="demoCol">6</div>
            </g-col>
            <g-col span="6">
              <div class="demoCol">6</div>
            </g-col>
            <g-col span="6">
              <div class="demoCol">6</div>
            </g-col>
          </g-row>

点击查看代码

        * {
            box-sizing: border-box;
          }
          <g-row class="demoRow" gutter="10">
            <g-col span="8">
              <div class="demoCol">8</div>
            </g-col>
            <g-col span="8" offset="8">
              <div class="demoCol">8</div>
            </g-col>
          </g-row>
          <g-row class="demoRow" gutter="10">
            <g-col span="6" offset="6">
              <div class="demoCol">6</div>
            </g-col>
            <g-col span="6" offset="6">
              <div class="demoCol">6</div>
            </g-col>
          </g-row>
          <g-row class="demoRow" gutter="10">
            <g-col span="4">
              <div class="demoCol">4</div>
            </g-col>
            <g-col span="4" offset="4">
              <div class="demoCol">4</div>
            </g-col>
            <g-col span="4" offset="8">
              <div class="demoCol">4</div>
            </g-col>
          </g-row>
          <g-row class="demoRow" gutter="10">
            <g-col span="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2" offset="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2" offset="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2" offset="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2">
              <div class="demoCol">2</div>
            </g-col>
            <g-col span="2" offset="2">
              <div class="demoCol">2</div>
            </g-col>
          </g-row>