CSS Master

}

.epsilon {

grid-column: 5 / 6;

grid-row: 3 / 10;

}

Eachgrid-columnvalueisashorthandforthegrid-column-startandgrid-

column-endproperties.Eachgrid-rowvalueisashorthandforgrid-row-start

andgrid-row-end.Theyindicatewhichrowsorcolumnsagriditemelementshould

span.Forexample,grid-column: 3 / 6indicatesto“startthiselement’sspanat

columnthreeofthegrid,andenditatcolumnsix.”

Gridlayouts,whenusedwiththefrunit,aredesignedtobeflexibleandresponsive.

Withmediaqueries,wecanalsochangethelayoutofthegrid—ordropitentirely—at

differentbreakpoints.Here,forexample,wecouldchangedisplay: gridtodis-

play: blockfornarrowerviewports.

Thinkofgridlayoutascomplementarytoflexbox.Flexboxletsusarrangeitems

eitherhorizontally(flex-direction: row)orvertically(flex-direction: column).

With grid layouts, however, a single element can stretch horizontally across columns

and vertically across rows―flexbox is one-dimensional, while grid layout is two-

dimensional. As a result, grid layout is the better choice for entire documents, but

flexbox is better for document components such as media objects and search forms.

To learn more about grid layout, see Rachel Andrews’ GridbyExamplesite.^2

InternetExplorer 10 and 11 andMicrosoftEdgehaveexperimentalsupportforan

oldervesrionofthegridlayoutspec;propertiesrequireavendorprefix.Chrome

andOperaalsosupportgridlayout;itisunprefixed,butdisabledbydefault.Webkit

hassupport,butprefixed.Yandexbrowser,^3 whichusesChromium/Blinkasits

base,doesenablegridlayoutbydefault.WithYandexbrowser,gridlayoutproperties

canskiptheprefix.

(^2) http://gridbyexample.com/
(^3) https://browser.yandex.com/
354 CSS Master