CSS GRID

1. display:grid ???
A guide by Matan Yossef

2. About me
Name: Matan Yossef
Age: 25
Position:
- Front End Developer at Incuber (Start-Up)
Education:
- Front End Development course at Netcraft Academy
- B.A in Business Management & New Media

3. We have so many display
techniques already
why should I bother with
display:grid

4. The trouble with current CSS layout
● Floats and clearfix hacks
● Absolute positioning means elements are taken out of the
document flow and risk overlaps
● Unnecessary markup and positioning oddities with display:table
● White space issues with inline-block
● Flexbox has only one-dimensional layouts

5. 3. Examples
CSS Grid - Browser Support

6. “It's only a matter of time before you can
use Grid in production. But the time to
learn it is now.”
- CHRIS HOUSE
CSS Tricks founder

7. Let’s dig into it!
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 100vh;
}
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50vh 50vh;
}

8. No margin nor padding
USE GRID GAP !
.container {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 20px;
/* shorthand*/
grid-gap: 20px 20px;
/* super shorthand*/
grid-gap: 20px;
}
https://codepen.io/matanyo
/pen/YZjVVq

9. New CSS unit
The fr unit
fr = “fraction of space”
grid-template-columns: 25% 25% 25% 25%;
/* 1fr 1fr 1fr 1fr */
Back to my codepen https://codepen.io/matanyo/pen/YZjVVq
Mixed with fixed size

10. Why repeat yourself?
Let’s keep our code
DRY
.container {
display: grid;
grid-template-columns:
repeat(4,1fr);
/* repeat([counter],
[unit])*/
/* grid-template-columns:
1fr 1fr 1fr 1fr; */
}
CSS Functions
- repeat()
Enter:
Back to my codepen

11. .container {
display: grid;
grid-template-columns:
minmax(300px,700px);
/****
minamx([min-size],[max-size]);
****/
}
Back to my codepen
CSS Functions
- minmax()
Why didn’t we have
this till now?!
Enter:

12. Name your grid!
http://codepen.io/matanyo/pen/jmwvde

13. Grid by the child elements
Complex Example
.red-child {
grid-column: 2;
grid-row: 1;
}
.green-child {
grid-column: 1;
grid-row: 2;
}

14. Concerns and Accessibility!
Young developers will not pay attention to
the HTML elements order.
Example: Pressing tab of unordered
elements.

15. Nice Hack!
http://codepen.io/matanyo/pen/OmENmG
Not sure if the user will see your css grid
layout?
Use @support property

16. THANK YOU!!!
A guide by Matan Yossef