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

Why do we need grids?

We have moved on

Nested Tables

DivititisHeavy DOM Nonsemantic use of elements Troubleshooting and maintenance is hard Responsive

CSS Frameworks to the Rescue

Zurb foundation

Twitter Bootstrap

Susy

960grid

etc…

Hacks

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.

CSS Grid Terminology

Grid Track

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

CSS Grid Terminology

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.

CSS Grid Terminology

Grid Area

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

Define 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-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .c { grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; } .d { grid-column-start: 1;

http://gridbyexample.com/examples/code/example2.html

Line Based Placement (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; }

http://gridbyexample.com/examples/code/example3.html

Line Based Placement (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; }

http://gridbyexample.com/examples/code/example5.html

Defining 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

Real Life Example

Foundation Example Bootstrap Example CSS Grid Example

Issues with CSS Grid

http://caniuse.com/#feat=css-grid

Further Readinghttp://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/

Thank You!