The "Tiles" pattern(タイルパターン)

既製のセクションのほとんどは 2 つの一般的な構造に基づいており、そのうちの 1 つは 「タイル」 パターンです。

ブロック (または「タイル」) で構成されるレイアウトを作成するたびに、タイルパターンを使用できます。このパターンは、機能タイル、価格設定、チームなどの既製のセクションの基礎となります。

テンプレートには、流動的なグリッドを作成するためのパーセンテージベースのグリッドシステムは提供されていません。ベースタイルの幅は固定されており (デフォルトは 330 ピクセル、24 ピクセルの余白があります)、これらの値は簡単に調整できます。

以下はタイルパターンの例です。

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
 
            <!-- Tiles pattern -->
            <div class="tiles-wrap">
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
            </div>
 
        </div>
    </div>
</section>

Clear a row(行をクリアする)

1 行に含めることができる .tiles-item 要素の数は、その幅によって異なります。たとえば、親コンテナには 3 つのアイテムが含まれていますが、「行をクリア」して新しい .tiles-wrap 要素を追加することで、そのうちの 2 つだけを簡単に表示できます 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
 
            <!-- Tiles pattern -->
            <div class="tiles-wrap">
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
            </div>
 
            <!-- Another tiles pattern -->
            <div class="tiles-wrap">
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
            </div>
 
        </div>
    </div>
</section>

Push uneven items to left(凹凸のあるものを左に寄せる)

.tiles-item 要素の数が奇数で、それらを左揃えにしたい場合は、.push-left クラスを .tiles-wrap 要素に追加するだけです 👇

<section class="section center-content">
    <div class="container">
        <div class="section-inner">
 
            <!-- Tiles pattern -->
            <div class="tiles-wrap push-left">
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                 <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
                <!-- Tiles item -->
                <div class="tiles-item">
                    <!-- Content -->
                </div>
 
            </div>
 
        </div>
    </div>
</section>

属性一覧

List of available HTML classes(利用可能な HTML クラスのリスト)

Class	Description
`.push-left`	Pushes uneven tile items to left

React

Prop	Type	Default	Accepted values
`pushLeft`	boolean	`false`	–

vue

Prop	Type	Default	Accepted values
`push-left`	boolean	`false`	–

分割パターン既製セクション