css grid
keep calm.
Another css layout??
![](http://www.reactiongifs.com/r/but-why.gif)
![](https://nonprofitssource.com/wp-content/uploads/2018/11/Vector-Smart-Object.png)
css technology is holding back designers
Current methods
-
FLOATs
Require clearfix hack, weird height issues
-
position: absolute
Takes elements out of the flow, hard to manage overlaps
-
display: table
Yuck. A lot of markup (<tr>, <td>), hard to position
-
display: inline-block
Weird whitespace issues, difficult to master
![](http://vignette1.wikia.nocookie.net/rickandmorty/images/1/1f/S2e5_disqualified.png/revision/latest?cb=20160926055256)
disqualified!
Flexbox to the rescue!
![](https://media.giphy.com/media/ntHRTkAOukqYg/giphy.gif)
flexbox is
one dimensional
<Flex>
<Flex class="nav"/>
<Flex column>
<Flex class="content" />
<Flex>
<Flex class="terms" />
<Flex class="ads" />
</Flex>
</Flex>
</Flex>
![](http://cdn.images.express.co.uk/img/dynamic/20/590x/secondary/Mr-Bean-539400.jpg)
![](https://s-media-cache-ak0.pinimg.com/564x/e3/c4/85/e3c485fc81f65326d05776ed34be7bcc.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3906841/05ccf16bec84d675fdf636a7c1b386bf.jpg)
css grid
new kid on the block
"css grid is becoming the most important tool in frontend arsenal. the time to learn it is now."
chris house
CSS Tricks founder
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7287438/pasted-from-clipboard.png)
![](https://image.slidesharecdn.com/thegreatstateofdesignwithcssgridlayoutandfriends-161204171249/95/the-great-state-of-design-with-css-grid-layout-and-friends-73-1024.jpg?cb=1481003632)
![](https://image.slidesharecdn.com/thegreatstateofdesignwithcssgridlayoutandfriends-161204171249/95/the-great-state-of-design-with-css-grid-layout-and-friends-74-638.jpg?cb=1481003632)
grid concept
![](http://p0.qhimg.com/t010b0d593c912074bc.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3905077/grid-area_1_.png)
grid line
![](http://p0.qhimg.com/t011525144466eab825.png)
grid TRACK
grid CELL
grid area
![](http://p0.qhimg.com/t013745f6e74cf7d816.png)
grid parts
grid container - 101
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.container {
display: grid;
}
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
}
-
display: grid
-
grid-template-columns
-
grid-template-rows
grid container - CSS
.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;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3905180/2017-06-14_0150.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3905186/2017-06-14_0152.png)
![](http://p0.qhimg.com/t01800e6196346b74a6.png)
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
spaces are between the lines
.container {
display: grid;
row-gap: 20px;
column-gap: 20px;
/* shorthand */
gap: 20px 20px;
/* super shorthand */
gap: 20px;
}
Forget margin and padding!
use
grid gap
New css unit - fr
Stands for of space
frozen
france
friend
fraction
.container {
/* grid-template-columns: 25% 25% 25% 25%; */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
New css toys!
![](http://i.imgur.com/lBYwEDm.gif)
New css toys!
repeat ([counter], [unit])
.container {
grid-template-columns: repeat(4, 1fr);
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
}
minmax ([min-size], [max-size])
.container {
grid-template-columns: 30px minmax(30px, 100px) 30px;
}
![](https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2017/03/grid-responsive.gif)
.container {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2019/05/email-newsletter.gif?ssl=1)
cells is everything
![](http://static.tumblr.com/94e2c89ce115b7e23ecdfd735d7e1689/rga4n7d/WItnw6wes/tumblr_static_3dozgibnodiccsggkkwck8o4o.jpg)
grid items
grid items position themselves inside the grid
Items are positioned using new properties
grid-column-start
grid-column-end
grid-row-start
grid-row-end
.a {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
}
.b {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 5;
}
.b {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
.b {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
.b {
grid-row: 2;
grid-column: 3 / span 2;
}
grid areas
or - deeper into the rabbit hole
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7287420/pasted-from-clipboard.png)
.a {
grid-area: header;
}
.b {
grid-area: content;
}
.c {
grid-area: nav;
}
.container1 {
grid-template-areas:
"header header header"
"nav content content"
"nav content content";
}
.container2 {
grid-template-areas:
"nav ... header"
"nav ... header"
"nav content content";
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3906465/2017-06-14_1256.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/3906487/2017-06-14_1300.png)
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7287826/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7287831/pasted-from-clipboard.png)
browser support
![](https://www.onlygfx.com/wp-content/uploads/2018/09/4-cross-x-duct-tape-1.png)
![](https://www.onlygfx.com/wp-content/uploads/2018/09/4-cross-x-duct-tape-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/7287250/pasted-from-clipboard.png)
additional resources
-
CSS Tricks - recommended
-
grid by example - thorough
-
grid garden - cool!
questions?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/233297/images/1699883/Q3cUg29.gif)
CSS grid 2.0
By Liad Yosef
CSS grid 2.0
Css Grid ino
- 3,935