CSS Grid enables you to create webpages with a layout where the elements overlap and respond to changing window size, without requiring complicated pixel calculation. For example, it simplifies writing a webpage with a layout that includes titles or captions over a set of images that can adapt to different aspect ratios or screen sizes.
The Creating an overlay with the CSS grid example demonstrates the basics of putting text over an image using only a few lines of CSS and HTML.
The Adapting to different sizes example can help you expand your webpage’s capabilities by showing how to resize your image and the CSS grid. The example shows an image in its original size, as well as a smaller and larger version, all
with a text overlay that shows more or less information based on the size of the image.
The Adapting to different positions example shows how change the position of the text that you overlay on an image. The example shows how to position text at the top, middle, or bottom of an image to provide flexibility to your page’s
design.
Reference
CSS Grid Alignment
Conceptual
Internet Explorer 10 Developer Guide: CSS Grid alignment
Internet Explorer Test Drive
Hands On: CSS3 Grid Layout
The Grid System
Gridddle
Internet Explorer Testing Center
CSS Grid Layout
The Internet Explorer Samples Gallery contains a variety of code samples that demonstrate new features available in Internet Explorer. These downloadable samples are provided as compressed ZIP files that contain the HTML, JavaScript, CSS, and image resources for the sample, along with the license agreement and sample description metadata. After you’ve downloaded and unzipped the compressed files, the sample files can be found in the following location:
(unzipped folder)\HTML,JavaScript\Website \(Sample)
This sample is provided as-is in order to indicate or demonstrate the functionality of the feature APIs for Internet Explorer 10. We appreciate your comments and questions on this sample!
For download info, visit Internet Explorer downloads.