CSS
【CSS】レスポンシブグリッドレイアウトSpacegrid
March 1, 2017

Spacegridはレスポンシブグリッドレイアウト。
<html> <head> <!-- for the @media queries to function --> <meta name="viewport" content="width=device-width" /> <!-- include the space-grid css --> <link rel="stylesheet" href="path_to/space-grid/css/spacegrid.min.css"> </head> </html>
<!-- full width example --> <div class="row"> <div class="space-1">This is 100% width</div> </div> <!-- three columns --> <div class="row"> <div class="space-3">This is 33.3% width</div> <div class="space-3">This is 33.3% width</div> <div class="space-3">This is 33.3% width</div> </div> <!-- two columns --> <div class="row"> <div class="space-2">This is 50% width</div> <div class="space-2">This is 50% width</div> </div> <!-- four columns --> <div class="row"> <div class="space-4">This is 25% width</div> <div class="space-4">This is 25% width</div> <div class="space-4">This is 25% width</div> <div class="space-4">This is 25% width</div> </div>
MIT