Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Grid Layout CSS Tutorial and Documentation Reference

Learn how to construct CSS grid layouts for projects in the future. You cannot apply it to your current projects yet because of limited browser support. It is similar to the Flexbox Layout Module but has different properties and features that you may find handy for future projects. This page will also lead you to the official documentation so that you get the knowledge first hand from the official source, and not solely from second hand sources. Simple grid example: <style> body{ margin:0px; } #grid { display: -ms-grid; -ms-grid-columns: 25% 25% 25% 25%; -ms-grid-rows: 50vh 50vh; } #grid > * { background: #CCC; border:#000 1px solid; font-size:75px; } #a { -ms-grid-column: 1; -ms-grid-row: 1; } #b { -ms-grid-column: 2; -ms-grid-row: 1; } #c { -ms-grid-column: 3; -ms-grid-row: 1; } #d { -ms-grid-column: 4; -ms-grid-row: 1; } #e { -ms-grid-column: 1; -ms-grid-row: 2; } #f { -ms-grid-column: 2; -ms-grid-row: 2; } #g { -ms-grid-column: 3; -ms-grid-row: 2; } #h { -ms-grid-column: 4; -ms-grid-row: 2; } </style> <div id="grid"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> <div id="d">d</div> <div id="e">e</div> <div id="f">f</div> <div id="g">g</div> <div id="h">h</div> </div> Website layout grid example: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS3 Grid layout Tutorial</title> <style> body { display: -ms-grid; -ms-grid-columns: 200px 10px 1fr 10px 200px; -ms-grid-rows: 100px 10px 1fr 10px 100px; margin: 0px; height: 100vh; min-width: 900px; } body > * { background: #CCC; font-size: 23px; } header { -ms-grid-column-span: 5; -ms-grid-row: 1; } nav { -ms-grid-column: 1; -ms-grid-row: 3; } #content { -ms-grid-column: 3; -ms-grid-row: 3; } aside { -ms-grid-column: 5; -ms-grid-row: 3; } footer { -ms-grid-row: 5; -ms-grid-column-span: 5; } </style> </head> <body> <header>header</header> <nav>navigation</nav> <div id="content">page content ...</div> <footer>footer</footer> <aside>aside</aside> </body> </html>

Official Documentation

http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/ http://www.w3.org/TR/css-grid-1/
thumb

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference