13 unit-flex-grid
The flex grid unit.
13.1 Core
The core module.
13.1.1 Default style
The default style.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="unit-flex-grid">
<div class="unit-flex-grid__column">
<!-- contents -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="unit-pict unit-pict--fit-max-width">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- contents -->
</div>
<div class="unit-flex-grid__column">
<!-- contents -->
<figure class="unit-pict unit-pict--fit-max-width">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<!-- contents -->
</div>
</div>13.2 Break
The break module.
13.2.1 Modifiers
The break modifiers.
- The breakpoint prefixes can be specified like as
sm:unit-flex-grid--break.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
unit-flex-grid--break
Break column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="unit-flex-grid {{modifier_class}}">
<div class="unit-flex-grid__column">
<!-- contents -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="unit-pict unit-pict--fit-max-width">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- contents -->
</div>
<div class="unit-flex-grid__column">
<!-- contents -->
<figure class="unit-pict unit-pict--fit-max-width">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<!-- contents -->
</div>
</div>13.3 Align
The align module.
13.3.1 Modifiers
The align modifiers.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-start
Starting alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-center
Center alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-end
Ending alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-space-between
Alignment on axis with space between
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-space-around
Alignment on axis with space around
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
<div class="unit-flex-grid {{modifier_class}}">
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<!-- content -->
</div>
</div>13.4 Align items
The align items module.
13.4.1 Modifiers
The align items modifiers.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-items-stretch
Items alignment on axis with stretch
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-items-start
Starting items alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-items-center
Center items alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--align-items-end
Ending items alignment on axis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
<div class="unit-flex-grid {{modifier_class}}">
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<!-- content -->
</div>
</div>13.5 Wrap
The wrap module.
13.5.1 Modifiers
The wrap modifiers.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--wrap-false
Disable wrap columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
unit-flex-grid--wrap-true
Enable wrap columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。
<div class="unit-flex-grid {{modifier_class}}">
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<p class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<!-- content -->
</div>
<div class="unit-flex-grid__column">
<!-- content -->
<figure class="unit-pict unit-pict--fit-max-width util--float-left">
<img class="unit-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
</figure>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</p>
<!-- content -->
</div>
</div>