zen-gridsサンプル

DrupalのZenテーマを利用するときは画面レイアウトの設計フレームワークZenGridsが必要不可欠です。

このトピックはZenGrids基本使用方法を紹介します。

レイアウト結果：


SCSS

@import "zen";

$zen-column-count: 4;
$zen-gutter-width: 10px;

.container
{
    @include zen-grid-container;
}
.class1
{
    border:1px solid black;
}
.block-0
{
    @extend .class1;
}
.block-a
{
    @include zen-clear();
    @extend .class1;
    @include zen-grid-item(2, 2);
}
.block-b
{
    @extend .class1;
    @include zen-grid-item(1, 1);
}
.block-c
{
    @extend .class1;
    @include zen-grid-item(1, 1, right);
}
.block-d
{
    @include zen-clear(right);
    @extend .class1;
    @include zen-grid-item(1, 1);
}
.block-e
{
    @extend .class1;
    @include zen-grid-item(1, 1, right);
}
.block-f
{
    @include zen-clear();
    @extend .class1;
}

HTML

<link href="/sass1/stylesheets/test6.css" media="all" rel="stylesheet" type="text/css" />

<div class="container">
<div class="block-0">Header</div>
<div class="block-a">A<br/>A<br/>A<br/>A<br/>A<br/>A</div>
<div class="block-b">B<br/>B</div>
<div class="block-c">C<br/>C</div>
<div class="block-d">D<br/>D<br/>D</div>
<div class="block-e">E<br/>E<br/>E</div>
<div class="block-f">Footer</div>
</div>