CSS

【CSS】Flexboxレイアウトに基づいたCSSグリッドシステム。RASTR

November 13, 2016
rastr

RASTRはFlexboxレイアウトに基づいたCSSグリッドシステム。

Simple Columns

<div class="row">
  <div class="col-12"></div>
</div>

<div class="row">
	<div class="col-6"></div>
	<div class="col-6"></div>
</div>

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

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

<div class="row">
	<div class="col-3"></div>
	<div class="col-9"></div>
</div>

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

<div class="row">
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
	<div class="col-1"></div>
</div>

MIT