CSS Gridを使った超シンプルなグリッドシステム
Result
CSS Gridを使った超シンプルなグリッドシステムです。
必須コードは5行くらいでカラム数は必要に応じて追加すれば完成します。
css
.grid-wrapper {
display: grid;
grid-gap: 0 2rem;
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
width: 100%;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
}
|
html
<div class="container">
<div class="grid-wrapper">
<div class="col-3">
<p>piyo</p>
</div>
<div class="col-3">
<p>piyo</p>
</div>
<div class="col-3">
<p>piyo</p>
</div>
<div class="col-3">
<p>piyo</p>
</div>
</div>
<div class="grid-wrapper">
<div class="col-2">
<p>hoge</p>
</div>
<div class="col-2">
<p>huga</p>
</div>
<div class="col-2">
<p>huga</p>
</div>
<div class="col-2">
<p>huga</p>
</div>
<div class="col-2">
<p>huga</p>
</div>
<div class="col-2">
<p>huga</p>
</div>
</div>
<div class="grid-wrapper">
<div class="col-5">
<p>hoge</p>
</div>
<div class="col-3">
<p>hoge</p>
</div>
<div class="col-4">
<p>hoge</p>
</div>
</div>
</div>
|
via
Super Simple Grids Using CSS Grid
