CodePamoja
CodePamoja means "Code Together" in Swahili. We are a group of passionate developers in The Netherlands and Kenya working together in virtual teams, transferring the latest software development skills to each other.
CSS Grid Layout
Introduction
Lay-outing history
Table (< 2008)
Floats (2009 - 2012)
Flexbox (> 2013)
CSS Grid Layout
First idea of specification
2005
CSS Grid Layout
Microsoft implements 3rd spec into IE10
2012
CSS Grid Layout
From then CSS Working Group began tweaking Microsoft’s implementation
CSS Grid Layout
Blink & Webkit get Grid Layout support behind feature flags
June 2013
CSS Grid Layout
All major browsers implemented the Grid Layout Spec 1.0
Oct 2017
Remarks
It's not CSS Grid VS Flexbox!
It's CSS Grid and/or Flexbox
Design's are not bound to 12 columns anymore!
Use CSS Grid progressively
Current versions of Edge, Chrome, FireFox & Safari support CSS Grid Layout v1.0
IE10 & IE11 support a old specification
Grid
What can we do with
CSS Grid Layout?
Grid
.wrapper {
display: grid;
}Simple grid
Simple grid 2
Advanced grid
Explicit grid
Explicit grid
When we use grid-template-columns and grid-template-rows we create an Explicit Grid.
Implicit grid
Implicit grid
If we try and place an item outside an explicit grid the browser will create an Implicit Grid line or lines in order to hold that item.
Grid tracks
Grid tracks
A grid track is the space between two grid lines.
Grid tracks
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}Grid lines
Grid lines
Grid lines
Grid lines are created when you define tracks
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}Grid cell
Grid cell
A grid cell is the smallest unit in the grid layout.
It is the space between four intersecting grid lines and conceptually much like a table cell.
Grid areas
Grid areas
A grid area is one or more grid cells that make up a rectangular area on the grid
Grid areas
.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}Grid gutters
Grid gutters
Gutters are spacing between content tracks.
Grid row
Grid row
A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines.
Grid row
.wrapper {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-rows: 100px 100px 100px;
}Grid column
Grid column
A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines.
Grid column
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-columns: 100px 100px 100px;
}Resources
Resources
Experts
Demos / Experiments
CSS Grid
By CodePamoja
