Five-Column Grid with Emoji Icons

A five-column (20%, 20%, 20%, 20%, 20%) grid is shown in Figure 6–5 with its related code in Listing 6–5.

Listing 6–5. Five-column grid (ch6/grid-5col.html)<div data-role="content">
  <div class="ui-grid-d" style="text-align: center;">
    <div class="ui-block-a">&#xe21c;</div>
    <div class="ui-block-b">&#xe21d;</div>
    <div class="ui-block-c">&#xe21e;</div>
    <div class="ui-block-d">&#xe21f;</div>
    <div class="ui-block-e">&#xe220;</div>
  </div>
</div>

The example closely resembles the four-column grid we saw previously except the CSS attribute for the grid is configured to support five columns (ui-grid-d) and we have added an additional block for the fifth column (ui-block-e). Each block contains a unique Emoji icon.¹

Figure 6–5. Five-column grid

NOTE: Emoji icons are a performant alternative to images because they consume zero HTTP requests and their payload is only a few characters of text. Unfortunately, Emoji icons are currently only supported in iOS.

___________

¹ See http://pukupi.com/post/1964.