Jacqueline Quintanilla Twin Cities Code Camp April 13, 2019 - - PowerPoint PPT Presentation

▶
jacqueline quintanilla
SMART_READER_LITE
LIVE PREVIEW

Jacqueline Quintanilla Twin Cities Code Camp April 13, 2019 - - PowerPoint PPT Presentation

Feb 21, 2024 439 likes •1.1k views

Jacqueline Quintanilla Twin Cities Code Camp April 13, 2019 qjac.net Dont 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

slide-1
SLIDE 1

qjac.net

Jacqueline Quintanilla

Twin Cities Code Camp April 13, 2019

slide-2
SLIDE 2

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?

You’re in the right room!

Some CSS knowledge is helpful, but not necessary.

Jacqueline Quintanilla qjac.net

slide-3
SLIDE 3

qjac.net

qjac.net @qjac @_qjac Slides: tinyurl.com/discover-grid

slide-4
SLIDE 4

qjac.net

➔ Frontend Developer ➔ Cat Lady ➔ Podcast Enthusiast ➔ Homebrewer ➔ Design Fanatic

slide-5
SLIDE 5

qjac.net jqdesign.co

slide-6
SLIDE 6

qjac.net

slide-7
SLIDE 7

qjac.net

➔ Simple semantic markup!! ➔ Maintainability!!! ➔ 2-D and inherently flexible!!!! ➔ Center all the things!!!!!

slide-8
SLIDE 8

qjac.net

➔ New Design Possibilities

slide-9
SLIDE 9

qjac.net

codepen.io/tutsplus/full/JLregK/

slide-10
SLIDE 10

qjac.net

labs.jensimmons.com

slide-11
SLIDE 11

qjac.net

twitter.com/MinaMarkham/status/1017191293099728896

slide-12
SLIDE 12

qjac.net

➔ It’s ready!!!!

slide-13
SLIDE 13

qjac.net

Source: https://caniuse.com/#feat=css-grid

jqdesign.co

slide-14
SLIDE 14

qjac.net

slide-15
SLIDE 15

qjac.net

CSS Grid:

An overly brief primer

slide-16
SLIDE 16

qjac.net

The Vocabulary

Grid Container

slide-17
SLIDE 17

qjac.net

The Vocabulary

Grid Container = parent

Grid Item = child Grid Item = child Grid Item = child Grid Item = child

slide-18
SLIDE 18

qjac.net

The Vocabulary

Grid Track Grid Track

slide-19
SLIDE 19

qjac.net

The Vocabulary

Grid Cell Grid Cell

slide-20
SLIDE 20

qjac.net

The Vocabulary

Gap

slide-21
SLIDE 21

qjac.net

The Vocabulary

Grid Area Grid Area

slide-22
SLIDE 22

qjac.net

The Vocabulary

Grid Area Grid Area

slide-23
SLIDE 23

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>

slide-24
SLIDE 24

qjac.net

Make The Grid

.wrapper { display: grid; }

slide-25
SLIDE 25

qjac.net

slide-26
SLIDE 26

qjac.net

Define The Grid

Grid Container .wrapper { display: grid; grid-template-columns: ????; grid-template-rows: ????; row-gap/column-gap/gap: ????; }

slide-27
SLIDE 27

qjac.net

codepen.io/qjac/pen/rZOemM

grid-template-columns: 300px 200px 100px;

slide-28
SLIDE 28

qjac.net

slide-29
SLIDE 29

qjac.net

codepen.io/qjac/pen/XPmroe

grid-template-columns: 3fr 2fr 1fr;

slide-30
SLIDE 30

qjac.net

codepen.io/qjac/pen/EeVKXm

grid-template-columns: 300px 2fr 1fr;

slide-31
SLIDE 31

qjac.net

codepen.io/qjac/pen/wEKogO

jqdesign.co

grid-template-columns: 200px minmax(100px, 1fr) minmax(200px, 400px);

slide-32
SLIDE 32

qjac.net

slide-33
SLIDE 33

qjac.net

.wrapper { display: grid; grid-template-columns: 300px 2fr 1fr; grid-template-rows: 150px 150px; gap: 20px; }

Auto Placement

slide-34
SLIDE 34

qjac.net

codepen.io/qjac/pen/jRqPZP

slide-35
SLIDE 35

qjac.net

slide-36
SLIDE 36

qjac.net

codepen.io/qjac/full/pBgWBe

slide-37
SLIDE 37

qjac.net

codepen.io/qjac/pen/jRqPZP

slide-38
SLIDE 38

qjac.net

Line-based Placement

.one { grid-column: 1 / 3; grid-row: 2 / 3; }

slide-39
SLIDE 39

qjac.net

.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; }

Named Lines

slide-40
SLIDE 40

qjac.net

slide-41
SLIDE 41

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"; }

slide-42
SLIDE 42

qjac.net

codepen.io/qjac/pen/YOyqmB

slide-43
SLIDE 43

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"; }

slide-44
SLIDE 44

qjac.net

Area Placement

.one { grid-area: nav; } .two { grid-area: main; } .three { grid-area: aside; } .four { grid-area: info1; } .five { grid-area: info2; } .six { grid-area: footer; } .wrapper { grid-template-columns: 200px 2fr 1fr; grid-template-areas: "nav nav nav" "aside main main" "aside info1 info2" "footer footer footer"; }

slide-45
SLIDE 45

qjac.net

codepen.io/collection/DPpxGx/#0

jqdesign.co

slide-46
SLIDE 46

qjac.net

slide-47
SLIDE 47

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"; } .wrapper { grid-template-columns: 200px 2fr 1fr; grid-template-areas: "nav nav nav" "main main aside" "info1 info2 aside" "footer footer footer"; }

slide-48
SLIDE 48

qjac.net

slide-49
SLIDE 49

qjac.net

slide-50
SLIDE 50

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
slide-51
SLIDE 51

qjac.net

https://codepen.io/qjac/pen/XQXeoV

justify-items: start; justify-items: end; justify-items: stretch; justify-items: center;

slide-52
SLIDE 52

qjac.net

https://codepen.io/qjac/pen/pBgWBe

align-items: start; align-items: end; align-items: stretch; align-items: center;

slide-53
SLIDE 53

qjac.net

https://codepen.io/qjac/pen/axNBjL

justify-content: start; justify-content: end; justify-content: stretch; Justify-content: center;

slide-54
SLIDE 54

qjac.net

https://codepen.io/qjac/pen/axNBjL

justify-content: space-around; justify-content: space-between; justify-content: space-evenly;

slide-55
SLIDE 55

qjac.net

https://codepen.io/qjac/pen/qwZmBr

align-content: start; align-content: end; align-content: stretch; align-content center;

slide-56
SLIDE 56

qjac.net

https://codepen.io/qjac/pen/qwZmBr

align-content: space-around; align-content: space-between; align-content: space-evenly;

slide-57
SLIDE 57

qjac.net

slide-58
SLIDE 58

qjac.net

Practice makes perfect.

Slides: tinyurl.com/discover-grid

➔ Jen Simmons’ Layout Lab ➔ Grid by Example ➔ Learn CSS Grid with Wes Bos ➔ Learn CSS Grid for Free ➔ Grid Garden

slide-59
SLIDE 59

qjac.net

Tips + tricks from the experts.

Slides: tinyurl.com/discover-grid

➔ 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 Layouts Today by Morten Rand-Hendriksen ➔ 3 CSS Grid Features That Make My Heart Flutter by Una Kravets

slide-60
SLIDE 60

qjac.net

Essential references.

Slides: tinyurl.com/discover-grid

➔ Firefox Grid Inspector ➔ The MDN Docs ➔ CSS Tricks Grid Guide ➔ GridBugs ➔ W3C Docs ➔ Demos from this talk

slide-61
SLIDE 61

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

slide-62
SLIDE 62

qjac.net jqdesign.co

slide-63
SLIDE 63

qjac.net

qjac.net @qjac @_qjac Slides: tinyurl.com/discover-grid

slide-64
SLIDE 64

qjac.net