【CSS】シンプルなモバイルflexboxベースのグリッドシステムSimpletonGrid

CSS

SimpletonGrid

January 13, 2018

SimpletonGridは、任意のプロジェクトにドロップできるシンプルなモバイルflexboxベースのグリッドシステムです。

How do I use it?

      <!-- .container is the main wrapper which can be centered with the .center helper class -->
      <div class="container center">
       
      <!-- rows are initiated with the .simple-row class and gutters can be applied with the .gutters helper class -->
        <div class="simple-row gutters">
        <!-- columns should be immediate children of rows and are created with the .simple-col class -->
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
        </div>
         
        <!-- Since the layout is determined by the number columns added and flexbox will distrubuite evenly, there are a few one-off classes for uneven columns -->
        <div class="simple-row gutters">
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-half">50%</div>
        </div>
         
        <div class="simple-row gutters">
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-three-qt">75%</div>
        </div>
         
      </div>

Latest Posts

Related Posts