Would you like some Grids with that?
-
Upload
kianosh-pourian -
Category
Internet
-
view
235 -
download
1
Transcript of Would you like some Grids with that?
![Page 1: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/1.jpg)
Would you like some Grids with that?
Kianosh Pourian
![Page 2: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/2.jpg)
About Me
15+ years experience in web development
CEO and Founder of Cielo Concepts Inc. (@cielo_concepts) - helping clients build awesome web stuff
![Page 3: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/3.jpg)
Why do we need grids?
![Page 4: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/4.jpg)
We have moved on
![Page 5: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/5.jpg)
Nested Tables
![Page 6: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/6.jpg)
DivititisHeavy DOM Nonsemantic use of elements Troubleshooting and maintenance is hard Responsive
![Page 7: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/7.jpg)
CSS Frameworks to the Rescue
Zurb foundation
Twitter Bootstrap
Susy
960grid
etc…
![Page 8: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/8.jpg)
Hacks
![Page 9: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/9.jpg)
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.
![Page 10: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/10.jpg)
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.
![Page 11: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/11.jpg)
CSS Grid Terminology
Grid Track
A Grid Track is the space between two Grid Lines, either horizontal or vertical.
![Page 12: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/12.jpg)
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.
![Page 13: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/13.jpg)
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.
![Page 14: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/14.jpg)
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
![Page 15: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/15.jpg)
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
![Page 16: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/16.jpg)
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
![Page 17: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/17.jpg)
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; }
![Page 18: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/18.jpg)
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
![Page 19: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/19.jpg)
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"; }
![Page 20: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/20.jpg)
Real Life Example
![Page 21: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/21.jpg)
Real Life Example
Foundation Example Bootstrap Example CSS Grid Example
![Page 23: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/23.jpg)
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/
![Page 24: Would you like some Grids with that?](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f30abb1a28ab6a2b8b4587/html5/thumbnails/24.jpg)
Thank You!