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>

Examples

<!-- 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

Demo/Download