css grid超级研究 - Githubissues

andypinet commented 7 years ago

<div class="grid">
    <div class="grid-item is xs-2-of-12"></div>
    <div class="grid-item is xs-5-of-12"></div>
    <div class="grid-item is xs-5-of-12"></div>
</div>
<div class="grid">
    <div class="grid-item is xs-2-of-12"></div>
    <div class="grid-item is xs-offset-5-of-12 xs-5-of-12"></div>
</div>
<div class="grid">
    <div class="grid-item is xs-2-of-12"></div>
    <div class="grid-item is xs-3-of-12"></div>
</div>
<div class="grid">
    <div class="grid-item is xs-2-of-12"></div>
    <div class="grid-item is xs-offset-3-of-12 xs-5-of-12"></div>
</div>
<div class="grid">
    <div class="grid-item is xs-3-of-12"></div>
    <div class="grid-item is xs-3-of-12"></div>
    <div class="grid-item is xs-3-of-12"></div>
    <div class="grid-item is xs-3-of-12"></div>
</div>
<div class="grid">
   <div class="grid-item is xs-4-of-12"></div>
   <div class="grid-item is xs-4-of-12"></div>
   <div class="grid-item is xs-4-of-12"></div>
   <div class="grid-item is xs-6-of-12"></div>
   <div class="grid-item is xs-6-of-12"></div>
   <div class="grid-item is xs-4-of-12"></div>
</div>

body {
  margin: 0;
}

$media: "xs";
$rownum: 12;
$gutter: 10px;

.grid {
  width: calc(100% + #{$gutter});
  margin-left: -$gutter;
  font-size: 0;
}

.grid-item {
  display: inline-block;
  height: 30px;
  background-color: #231231;
  margin-left: $gutter;
  font-size: 14px;

  @for $i from 1 through $rownum {
    &.is.#{$media}-#{$i}-of-#{$rownum} {
      width: calc(#{1/$rownum*100%*$i} - #{$gutter});
    }   
    &.is.#{$media}-offset-#{$i}-of-#{$rownum} {
      margin-left: calc(#{1/$rownum*100%*$i} + #{$gutter});
    }  
  }
}

andypinet commented 7 years ago

现在手机都支持flexbox了会更加简单了

<div class="grid"> <!-- 4 columns with padding -->
  <div class="grid-item is xs-3-of-12">
    1- lorem ipsum<br>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal. 
  </div>
  <div class="grid-item is xs-3-of-12">
    2- lorem ipsum Hopla choucroute !
  </div>
  <div class="grid-item is xs-3-of-12">
    3- lorem ipsum<br>condimentum Verdammi ch'ai ac réchime météor barapli s'guelt quam, non Christkindelsmärik blottkopf, Carola tellus rucksack vielmols, Gal !
  </div>
  <div class="grid-item is xs-3-of-12">
    4- lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
  </div>
  <div class="grid-item is xs-3-of-12">
    5- lorem ipsum<br>Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim. Verdammi 
  </div>
  <div class="grid-item is xs-3-of-12">
    6- lorem ipsum<br>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal.
  </div>
  <div class="grid-item is xs-3-of-12" style="margin-left: auto;">
    7- simple "offset" with <br><code>margin-left: auto</code>
  </div>
</div>

$media: "xs";
$rownum: 12;
$gutter: 10px;

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -$gutter;

    /* Inline-block fallback */
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}
.grid > .grid-item {
    flex: 0 0 auto;
    display: block;  /* IE fix */
  margin-left: $gutter;

    /* Inline-block fallback */
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
    text-rendering: auto;
}

@for $i from 1 through $rownum {
  &.is.#{$media}-#{$i}-of-#{$rownum} {
    width: calc(#{1/$rownum*100%*$i} - #{$gutter});
  }     
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

andypinet commented 7 years ago

无论什么布局我们都会注意到其实很多情况下精确的定义可能更好

andypinet / blog

css grid超级研究 #10