CSS Master

Grid Layout

Withgridlayout,we’llbeabletocreatedocumentlayoutssuchastheoneinFig-

ure10.1withoutrowsofdivelements.

Figure 10.1. Grid layout enables complex page layouts

Itusesthefollowingmarkup:

<div class="grid">

<div class="alpha">alpha</div>

<div class="beta">beta</div>

<div class="gamma">gamma</div>

<div class="delta">delta</div>

<div class="epsilon">epsilon</div>

</div>

There’sonewrappingdivelementwithaclassnameofgrid,andfivechildelements.

Comparethattothemarkupwe’dneedtousetoday:

<div class="grid-row">

<div class="alpha">alpha</div>

<div class="beta">beta</div>

352 CSS Master