首页 文章

如何使用sass在“网格的子元素和父元素”上创建“具有相等百分比余量的流体网格”？

提问于
浏览 次
-2

如何使用sass创建"fluid grid with equal percentage margin on child & parent element of a grid"？检查下面的图像.. http://i.stack.imgur.com/6rde8.png

我使用sass创建了一个流体网格 . 但是子列（灰色框）与父元素不一样 . 如何使用sass创建一个网格系统，其中子间隙等于父间隙（如第二张图所示）？

更新===============
检查这个小提琴.. https://jsfiddle.net/huqozhqy/

红色框之间的差距大于绿色框之间的差距..我想要一个SASS mixin或数学公式来生成一个网格，其中两个间隙相等＆基于窗口调整大小的流体..

HTML应该是这样的，没有额外的div ..

<div style="overflow:hidden;">
  <div class="span-4">
    <div class="span-2">1</div>
    <div class="span-2">1</div>
  </div
</div>
html css sass

1 回答

  • 0

    这是一个完美的使用sass ...你可以嵌套两个循环，并有sass做数学...

    SCSS

    $columns: 4;
$subcolumns: 6;
$margin : 3%; 

@for $i from 1 through $columns {
  .span-#{$i} {
    width: (100 / $i) * 1% - $margin*(($i - 1)/$i);
    margin-right:$margin;

      @for $j from 1 through $subcolumns {
        .span-#{$j} {
          width: (100 / $j) * 1% - $i*$margin*(($j - 1)/$j);
          margin-right:$margin*$i;
        }
      }//j-loop

  }//i-loop

}

.col{
  float:left;
  background-color:maroon;
  .col{
    background-color:red;
    margin-top:10px;
    & .col:last-child{
      margin-right:0px;
    }
  }
}


.row{ 
  background-color:#999999;
  .col:last-child{
  margin-right:0px;
  }
  &:after{
   clear:both;
   content:"";
   display:block;
  }
}

    HTML

    <div class="row">
<div class="col span-4">
      <div class="col span-2">2</div>
      <div class="col span-2">2</div>
</div>
<div class="col span-4">
      <div class="col span-2">2</div>
      <div class="col span-4">4</div>
      <div class="col span-4">4</div>
</div>

<div class="col span-2">
      <div class="col span-3">3</div>
      <div class="col span-6">6</div>
      <div class="col span-6">6</div>
      <div class="col span-3">3</div>
</div>

    http://codepen.io/johanthuresson/pen/NPMmox?editors=110

    回复于

相关问题