Great web design starts with the grid
1.61803398875
View Slide
Order and creativity
The Anatomy ofthe Grid
UnitsSmallest vertical division
ColumnsGroups of units
RegionsGroups of columns of any number
FieldsHorizontal divisions
GuttersEmpty spaces between units and columns
Margins and PaddingMargins are space outside. Padding is space insideElementsHeadlines, buttons, images, etc.ModulesGroups of elements
GridIs Epic In Every Way
CSS FloatsHave always been awesome
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6
.left {width: 26%;box-sizing: border-box;float: left;}.right {box-sizing: border-box;margin-left: calc(26% + 20px);}.float {margin: auto;width: 960px;background: transparent url(float.png) repeat-y 0 25%;}.float:after {content: '';display: block;clear: both;}leftright
Floats are evilThere must be a better way
CSS Grid
headersidebarcontentinfofooter
headersidebarcontentinfofooter.grid {display: grid;grid-template-columns: 50% 50%;grid-template-rows: auto;max-width: 600px;margin: 100px auto;}
headersidebarcontentinfofooterheader {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;background: #fddf58;}
headersidebarcontentinfofooter.sidebar {grid-column-start: 1;grid-column-end: 2;grid-row-start: 2;grid-row-end: 3;background: #e68930;}
headersidebarcontentinfofooter.content {grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;background: #1a98f9;}
headersidebarcontentinfofooter.info {grid-column-start: 1;grid-column-end: 2;grid-row-start: 3;grid-row-end: 4;background: #fff;}
headersidebarcontentinfofooterfooter {grid-column-start: 1;grid-column-end: 3;grid-row-start: 4;grid-row-end: 5;background: #fddf58;}
.grid {display: grid;grid-template-columns: 50% 50%;grid-template-rows: auto;max-width: 600px;margin: 100px auto;grid-column-gap: 20px;grid-row-gap: 20px;}
headersidebarcontentinfofooterExtra section.extra {background: #fff;}
Implicit and ExplicitGrid
.grid {grid-template-columns: 1fr 3fr;grid-template-rows: 120px 120px auto 120px;}
Complex Layouts
Do you need a framework?
Nope
Ascii Art\`\ /`/\ V //. .\=\ T /=/ ^ \/\\ //\__\ " " /__(____/^\____)
.grid {grid-template-areas:"header header""sidebar content""info content""footer footer";}header { grid-area: header; background: #fddf58; }.sidebar { grid-area: sidebar; background: #e68930; }.content { grid-area: content; background: #1a98f9; }.info { grid-area: info; background: #fff; }footer { grid-area: footer; background: #fddf58; }
.grid {grid-template-areas:"header header""sidebar .""info content""footer footer";}
.grid {grid-template-areas:"header content""sidebar content""info content""footer footer";}
.grid {grid-template-areas:"header header info""sidebar content info"". content info""footer footer footer";}.grid {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 120px 120px 120px 120px;}
.grid {grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 120px 120px 120px 120px;}.grid {grid-template-columns: repeat(3, 1fr);grid-template-rows: 120px 120px 120px 120px;}
.grid {max-width: 640px;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) );grid-template-rows: auto;}header { background: #fddf58; }.sidebar { background: #e68930; }.content { background: #1a98f9; }.info { background: #fff; }footer { background: #fddf58; }
Browser Support
IECreated CSS Grid!
Are we back to browser sniffing?
@supports (display: grid) {.grid {grid-template-areas:"header content""sidebar content""info content""footer footer";}}
Fallbacks
Flexbox
Accessability
footerheadersidebarcontentinfo
Rachel Andrews - Grid by Design
Rachel Andrews - Talk
“Great web designstarts with thegrid”