その２でまとめるのは固定ページで使っているグリッドとパネルです。
導入したのだいぶ前なのであんまり覚えていないのですが「grid」で画面を横に分割してその内で「pannel」を使うようです。
未だに基本がよく分かっていないのでこのサイトの固定ページで使ったものを具体例としてコードをメモっておきます。
例１：「このサイトについて」ページ
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<!-- ↑画面を横に２分割、768px未満のデバイス幅で縦にスタック -->
<div class="uk-panel uk-panel-box">
<h3>見出し１</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<h3>見出し２</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<h3>見出し３</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-panel uk-panel-box">
<h3>見出し４</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
</div>実装結果
見出し１
…
…
…
見出し２
…
…
…
見出し３
…
…
…
見出し４
…
…
…
例２：フロントページ
<div class="uk-grid">
<div class="uk-width-medium-1-3 uk-margin-top uk-margin-bottom">
<!-- ↑画面を横に３分割、768px未満のデバイス幅で縦にスタック -->
<h3>見出し１</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="uk-width-medium-1-3 uk-margin-top">
<h3>見出し２</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<h3>見出し３</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<h3>見出し４</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="uk-width-medium-1-3 uk-margin-top">
<h3>見出し５</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<h3>見出し６</h3>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>実装結果
見出し１
…
…
…
見出し２
…
…
…
見出し３
…
…
…
見出し４
…
…
…
見出し５
…
…
…
見出し６
…
…
…
実際のフロントページはソースコードが若干ブサイクでした。そして何故か「pannel」を使っていない。今度直します。
例３：登場人物紹介
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<!-- ↑画面を４分割したうちの1/4を使用、768px未満のデバイス幅で縦にスタック -->
<div class="uk-panel"><img src="【アイコンのURL】" alt=""></div>
</div>
<div class="uk-width-medium-3-4">
<!-- ↑画面を４分割したうちの3/4を使用、768px未満のデバイス幅で縦にスタック -->
<div class="uk-panel">
<p><strong>人物１の名前</strong> / character1's name</p>
<p>人物１の説明。</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel"><img src="【アイコンのURL】" alt=""></div>
</div>
<div class="uk-width-medium-3-4">
<div class="uk-panel">
<p><strong>人物２の名前</strong> / character2's name</p>
<p>人物２の説明。</p>
</div>
</div>
</div>実装結果
人物１の名前 / character1’s name
人物１の説明。
人物２の名前 / character2’s name
人物２の説明。