224 Chapter 17
You create tracks with the -ms-grid-columns and -ms-grid-rows properties,
which are analogous to grid-template-columns and grid-template-rows. The dif-
ference is in the way you repeat track lines: When designing for IE, you put
the width values in parentheses, followed by the number of repetitions in
square brackets:E {
-ms-grid-columns: (1fr)[3];
-ms-grid-rows: (80px)[2];
}Grid items are placed with the -ms-grid-column and -ms-grid-row proper-
ties, which function like grid-column and grid-row, but only allow a single
numeric value. To span items across multiple cells, you must use -ms-grid-
column-span and -ms-grid-row-span to set the number of tracks an item should
span (like the span keyword.)
That being the case, the rules applied to elements E and F in this code
block are identical in function:E {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
}
F {
grid-column: 1 / span 2;
grid-row: 2 / span 3;
}As of this writing, the IE syntax has no named areas, nor does it have
anything equivalent to grid-column-end or grid-row-end.Summary
Grids are the first step toward a whole new way of laying out content on
the Web. The combination of Grid Layout, Flexbox positioning, and Media
Queries makes possible rich layouts that you can adapt to many different
devices and viewports, ushering in a whole new world of web design, free
from the constraints of float hacks and restrictive markup.Grid Layout: Browser Support
Chrome firefox safari ie
Grid layout No* No No IE10†
* Implemented but off by default
† Syntax different from the spec; with vendor prefix