Would you like some Grids with that?

Would you like some
Grids with that?
Kianosh Pourian

About Me
15+ years experience
in web development
CEO and Founder of
Cielo Concepts Inc.
(@cielo_concepts) -
helping clients build
awesome web stuff

Divititis
Heavy DOM
Nonsemantic use of
elements
Troubleshooting and
maintenance is hard
Responsive

CSS Frameworks to the
Rescue
Zurb foundation
Twitter Bootstrap
Susy
960grid
etc…

Enter “CSS Grids”
Grid Layout gives us a method
of creating structures that
are not unlike using “tables
for layout”. However, being
described in CSS and not in
HTML they allow us to create
layouts that can be redefined
using Media Queries and adapt
to different contexts.

CSS Grid Terminology
Grid Lines
Grid Lines are the lines that make
up the grid. These can be
horizontal or vertical. We can
refer to them by number, or by
name.

Grid Track
A Grid Track is the space between two Grid
Lines, either horizontal or vertical.

Grid Cell
A Grid Cell is the space between 4
Grid Lines. So it is the smallest
unit on our grid that is available
for us to place an item into.
Conceptually it is just like a table
cell.

Grid Area
A Grid Area is any area on the Grid
bound by four grid lines. It may
contain a number of Grid Cells.

Deﬁne the Grid
// HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
// CSS
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
http://gridbyexample.com/examples/code/example1.html

Line Based Placement
.a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.c {
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.d {

(Shorthand)
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.e {
grid-column: 3 / 4;
grid-row: 3 / 4;
}

(Shorthand)
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 3 / 2 / 4;
}
.c {
grid-area: 1 / 5 / 2 / 6;
}
.d {
grid-area: 3 / 1 / 4 / 2;
}
.e {
grid-area: 3 / 3 / 4 / 4;
}
.f {
grid-area: 3 / 5 / 4 / 6;
}

Spanning Cells
.a {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.b {
grid-column: 5 / 6;
grid-row: 1 / 4;
}
.c {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.d {
grid-column: 3 / 4;
grid-row: 3 / 4;
}

Deﬁning Grid Areas
// HTML
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
</div>
// CSS
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto;
grid-template-areas: "header header header header header"
"sidebar . content content content";
}

Real Life Example
Foundation Example
Bootstrap Example
CSS Grid Example

Issues with CSS Grid
http://caniuse.com/#feat=css-grid

Further Reading
http://gridbyexample.com/
http://www.w3.org/TR/css-grid-1/
http://rachelandrew.co.uk/archives/
2014/06/27/css-grid-layout-getting-to-
grips-with-the-chrome-implementation/
http://dev.modern.ie/testdrive/

Would you like some Grids with that?

More Related Content

Similar to Would you like some Grids with that? (20)

Recently uploaded (20)

Would you like some Grids with that?