Jacqueline Quintanilla Twin Cities Code Camp April 13, 2019 qjac.net
Don’t know what CSS Grid is? ➔ Curious about CSS Grid? ➔ Need to boost your grid skills? ➔ Not sure if grid is the right solution? ➔ Jacqueline Quintanilla You’re in the right room! qjac.net Some CSS knowledge is helpful, but not necessary. qjac.net
qjac.net @_qjac @qjac Slides: tinyurl.com/discover-grid qjac.net
➔ Frontend Developer ➔ Cat Lady ➔ Podcast Enthusiast ➔ Homebrewer ➔ Design Fanatic qjac.net
jqdesign.co qjac.net
qjac.net
➔ Simple semantic markup!! ➔ Maintainability!!! ➔ 2-D and inherently flexible!!!! ➔ Center all the things!!!!! qjac.net
➔ New Design Possibilities qjac.net
codepen.io/tutsplus/full/JLregK/ qjac.net
labs.jensimmons.com qjac.net
twitter.com/MinaMarkham/status/1017191293099728896 qjac.net
➔ It’s ready!!!! qjac.net
Source: https://caniuse.com/#feat=css-grid jqdesign.co qjac.net
qjac.net
CSS Grid: An overly brief primer qjac.net
The Vocabulary Grid Container qjac.net
The Vocabulary Grid Item = child Grid Container = parent Grid Item = child Grid Item Grid Item = child = child qjac.net
The Vocabulary Grid Track Grid Track qjac.net
The Vocabulary Grid Cell Grid Cell qjac.net
The Vocabulary Gap qjac.net
The Vocabulary Grid Grid Area Area qjac.net
The Vocabulary Grid Area Grid Area qjac.net
We have some HTML. Now what? <div class="wrapper"> <div class="child one">1</div> <div class="child two">2</div> <div class="child three">3</div> <div class="child four">4</div> <div class="child five">5</div> <div class="child six">6</div> </div> qjac.net
Make The Grid .wrapper { display: grid; } qjac.net
qjac.net
Define The Grid Grid Container .wrapper { display: grid; grid-template-columns: ????; grid-template-rows: ????; row-gap/column-gap/gap: ????; } qjac.net
grid-template-columns: 300px 200px 100px; codepen.io/qjac/pen/rZOemM qjac.net
qjac.net
grid-template-columns: 3fr 2fr 1fr; codepen.io/qjac/pen/XPmroe qjac.net
grid-template-columns: 300px 2fr 1fr; codepen.io/qjac/pen/EeVKXm qjac.net
grid-template-columns: 200px minmax(100px, 1fr) minmax(200px, 400px); codepen.io/qjac/pen/wEKogO jqdesign.co qjac.net
qjac.net
Auto Placement .wrapper { display: grid; grid-template-columns: 300px 2fr 1fr; grid-template-rows: 150px 150px; gap: 20px; } qjac.net
qjac.net codepen.io/qjac/pen/jRqPZP
qjac.net
qjac.net codepen.io/qjac/full/pBgWBe
qjac.net codepen.io/qjac/pen/jRqPZP
Line-based Placement .one { grid-column: 1 / 3; grid-row: 2 / 3; } qjac.net
Named Lines .wrapper { display: grid; grid-template-columns: [start] 300px [main-start] 2fr [bob] 1fr [end]; grid-template-rows: [nav] 150px [row2] 150px; } .one { grid-column: main-start/end; grid-row: row2; } .two { grid-column-start: bob; } qjac.net
qjac.net
Area Placement .wrapper { grid-template-columns: 200px 2fr 1fr; grid-template-areas: "nav nav nav" "aside main main" "aside info1 info2" "footer footer footer"; } qjac.net
codepen.io/qjac/pen/YOyqmB qjac.net
Area Placement .wrapper { grid-template-columns: 200px 2fr 1fr; grid-template-areas: "nav nav nav" "aside main main" "aside info1 info2" "footer footer footer"; } qjac.net
Area Placement .one { .four { .wrapper { grid-area: nav; grid-area: info1; grid-template-columns: 200px 2fr 1fr; } } grid-template-areas: .two { .five { "nav nav nav" grid-area: main; grid-area: info2; "aside main main" } } "aside info1 info2" .three { .six { "footer footer footer"; grid-area: aside; grid-area: footer; } } } qjac.net
codepen.io/collection/DPpxGx/#0 jqdesign.co qjac.net
qjac.net
Area Placement .wrapper { .wrapper { grid-template-columns: 200px 2fr 1fr; grid-template-columns: 200px 2fr 1fr; grid-template-areas: grid-template-areas: "nav nav nav" "nav nav nav" " aside main main" "main main aside " " aside info1 info2" "info1 info2 aside " "footer footer footer"; "footer footer footer"; } } qjac.net
qjac.net
qjac.net
Alignment Justify-items? Align-items? Justify-content? Align-content? Justify = along the inline (row) axis ● Align = along the block (column) axis ● Items = all grid items in container ● Content = the entire grid in the container ● qjac.net
justify-items: start; justify-items: end; justify-items: center; justify-items: stretch; https://codepen.io/qjac/pen/XQXeoV qjac.net
align-items: start; align-items: end; align-items: center; align-items: stretch; https://codepen.io/qjac/pen/pBgWBe qjac.net
justify-content: start; justify-content: end; Justify-content: center; justify-content: stretch; https://codepen.io/qjac/pen/axNBjL qjac.net
justify-content: space-around; justify-content: space-between; justify-content: space-evenly; https://codepen.io/qjac/pen/axNBjL qjac.net
align-content: start; align-content: end; align-content center; align-content: stretch; https://codepen.io/qjac/pen/qwZmBr qjac.net
align-content: space-around; align-content: space-between; align-content: space-evenly; https://codepen.io/qjac/pen/qwZmBr qjac.net
qjac.net
Jen Simmons’ Layout Lab ➔ Grid by Example ➔ Learn CSS Grid with Wes Bos ➔ Learn CSS Grid for Free ➔ Practice makes perfect. Grid Garden ➔ Slides: tinyurl.com/discover-grid qjac.net
The New Layout Standard For The Web ➔ by Rachel Andrew CSS Grid Gotchas And Stumbling Blocks ➔ by Rachel Andrew Best Practices With CSS Grid Layout ➔ by Rachel Andrew Building Production-Ready CSS Grid ➔ Tips + tricks from Layouts Today the experts. by Morten Rand-Hendriksen Slides: tinyurl.com/discover-grid 3 CSS Grid Features That Make My ➔ Heart Flutter by Una Kravets qjac.net
Firefox Grid Inspector ➔ The MDN Docs ➔ CSS Tricks Grid Guide ➔ GridBugs ➔ W3C Docs ➔ Essential references. Demos from this talk ➔ Slides: tinyurl.com/discover-grid qjac.net
Tools made for the job Static is still the default ➔ Floats for floating ➔ Tables for tabular data ➔ Columns for text blocks ➔ Absolute for absolute positioning ➔ Fixed for fixing to the viewport ➔ Relative for positioning relative to the default ➔ Flex for one-dimensional flexible layout ➔ Grid for two-dimensional flexible layout ➔ qjac.net
jqdesign.co qjac.net
qjac.net @_qjac @qjac Slides: tinyurl.com/discover-grid qjac.net
qjac.net
Recommend
More recommend
