LP6 Style Guide: Layout

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).

Fallback Layout

Modern browsers support Grid. Deprecated browsers do not. Internet Explorer is deprecated yet still used by internal users and possibly some external. The fallback model for these browsers is a simple table block. Browsers that support CSS Grid will use it. Browsers that don't will ignore it.

CSS Example

				
		/*** Table Fallback ***/
		body, .grid-layout {
		  display: block;
		  width: 100%;
		}
		body > header, .grid-layout > header {
		  display: block;
		  width: 100%;
		  vertical-align: top;
		}
		body > main, .grid-layout > main {
		  display: block;
		  width: 100%;
		  vertical-align: top;
		}
		body > footer, .grid-layout > footer {
		  display: block;
		  width: 100%;
		  vertical-align: top;
		}

		/*** CSS Grid ***/
		body, .grid-layout {
		  display: grid;
		  grid-template-columns: 100%;
		  grid-template-rows: auto;
		  grid-template-areas:
		    "header"
		    "main"
		    "footer"
		  ;
		}
		body > header, .grid-layout > header {
		  grid-area: header;
		}
		body > main, .grid-layout > main {
		  grid-area: main;
		}
		body > footer, .grid-layout > footer {
		  grid-area: footer;
		}