Let's Learn CSS Grid - FEDC

1.

LET’S LEARN CSSGRID

2.

Hi there! I’m Tim Smith

3.

None

4.

YouTube Channel youtube.com/smithtimmytim

5.

Thank You

6.

Agenda

7.

Agenda 1. Problems we’ve had with layout

8.

Agenda 1. Problems we’ve had with layout 2. What is
CSS Grid and how does it solve these problems?

9.

CSS Grid and how does it solve these problems? 3. Why do I need to learn this?

10.

CSS Grid and how does it solve these problems? 3. Why do I need to learn this? 4. Resources

11.

A History of Layout Issues

12.

Floats

13.

Floats Suck

14.

CSS Frameworks

15.

CSS Frameworks <div class="small-12 medium-6 large-8"></div>

16.

Separation of Concerns

17.

Floats Aren’t Bad

18.

They’re Not for Complex Layouts

19.

Why?

20.

None

21.

Flexbox

22.

Flexbox is Flexible

23.

Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main>

24.

Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our
CSS.

25.

Main Column and Sidebar Layout <aside>Aside</aside> <main>Main Content</main> And our
CSS. body { display: flex; } aside { background-color: #333; flex: 1 1 30%; } main { background-color: #333; flex: 1 1 70%; }

26.

The two columns are completely ﬂexible.

27.

Flexbox Card Layout <ul class="boxes"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
</ul>

28.

</ul> And now our CSS.

29.

</ul> And now our CSS. .boxes { display: flex; flex-wrap: wrap; } .boxes li { flex: 1 1 30%; background: #333; margin: 0 .5rem 1rem; }

30.

This is not what I want!

31.

Math

32.

You Need Stuﬀ Like This li:nth-child(2n+2) { margin-right: 0; }

33.

Oh wait! What about bigger screens?

34.

Oh wait! What about bigger screens? @media screen and (min-width: 40em) { li:nth-child(2n+2) { margin-right: 1.5rem; } li:nth-child(3n+3) { margin-right: 0; } }

35.

None

36.

Flexbox Is Awesome

37.

Vertical Align!

38.

We’re Using Flexbox Wrong

39.

CSS Grid to the Rescue

40.

CSS Grid is Not a Float Killer

41.

CSS Grid is Not a Flexbox Killer

42.

You Don’t Need a Framework

43.

CSS Grid Is the Framework

44.

CSS Grid is Friendly

45.

Great Use of Flexbox

46.

Great Use of Floats

47.

CSS Grid What Is It Good For?

48.

“My super simple theory at the moment — if you
are putting widths on ﬂex items, you are doing it wrong. Use Grid. (Let’s see if that holds.) —Jen Simmons

49.

CSS Grid Basics

50.

display: grid;

51.

grid-template-columns

52.

fr

53.

grid-gap

54.

Let’s See It in Action

55.

Holy Grail Layout

56.

Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer>

57.

Set Up <header>Header</header> <aside>Aside</aside> <main>Main Content</main> <footer>Footer</footer> body { display:
grid; grid-template-columns: 2fr 3fr; grid-gap: 2rem; }

58.

Let’s Place Our Items header { grid-column: 1 / span
2; } aside { grid-column-end: span 1; grid-row: 2; } main { grid-column: 2 / span 1; grid-row: 2; } footer { grid-column: 1 / span 2; grid-row: 3; }

59.

Grid Lines

60.

Rewrite with Grid Areas body { display: grid; grid-template-columns: 2fr
3fr; grid-gap: 2rem; grid-template-areas: "header header" "aside main" "footer footer"; } header { grid-area: header; } aside { grid-area: aside; } main { grid-area: main; } footer { grid-area: footer; }

61.

None

62.

What If? body { grid-template-areas: ". header" "aside main" ".
footer"; }

63.

None

64.

None

65.

Easily Responsive body { display: grid; grid-gap: 2rem; grid-template-areas: "header"
"main" "aside" "footer"; } @media and screen (min-width: 40em) { body { grid-template-columns: 2fr 3fr; grid-template-areas: "header header" "aside main" "footer footer"; } }

66.

None

67.

Card Layout

68.

Setup <ul class="boxes"> <li>Box 1</li> <li>Box 2</li> <li>Box 3</li> <li>Box
4</li> <li>Box 5</li> <li>Box 6</li> </ul>

69.

4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid.

70.

4</li> <li>Box 5</li> <li>Box 6</li> </ul> Now let’s get these puppies on a Grid. .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1rem; }

71.

Whoa! Hold Up.

72.

Let’s Dissect This .boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,
1fr)); grid-gap: 1rem; }

73.

None

74.

Mind. Blown.

75.

Special Portfolio-Inspired Layout

76.

Setup <ul class="portfolio"> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> <li>Item
Four</li> <li>Item Five</li> </ul>

77.

Four</li> <li>Item Five</li> </ul> And setup our Grid container.

78.

Four</li> <li>Item Five</li> </ul> And setup our Grid container. .portfolio { display: grid; grid-auto-rows: minmax(100px, auto); grid-gap: 2px; grid-template-columns: repeat(6, 1fr); }

79.

grid-auto-rows

80.

Let’s Place Our Items .portfolio li:nth-child(1) { grid-column: 1 /
-1; } .portfolio li:nth-child(2) { grid-column: 1 / span 2; grid-row-end: span 3; } .portfolio li:nth-child(3) { grid-column: 3 / span 4; grid-row-end: span 2; } .portfolio li:nth-child(4), .portfolio li:nth-child(5) { grid-column: span 2; }

81.

None

82.

Holy Jack City, Batman

83.

The Power of CSS Grid

84.

None

85.

The Time is Now

86.

Simpler Code

87.

New Amazing Layouts

88.

I Delayed Learning Flexbox and Regret It

89.

Feature Queries

90.

Like This @supports (display:grid) { /* Grid CSS in here
*/ } @supports not (display:grid) { /* Fallback CSS here */ }

91.

None

92.

Browsers Ignore CSS They Don’t Understand

93.

What Did We Learn?

94.

1 CSS Grid Is Awesome

95.

2 CSS Grid Is Friendly

96.

3 Use CSS Grid Today

97.

Only the Beginning

98.

Rachel Andrew gridbyexample.com

99.

Jen Simmons labs.jensimmons.com

100.

Mozilla Developer Network developer.mozilla.org

101.

Read The Spec w3.org/TR/css-grid-1/

102.

Thanks! ttimsmith.com · @smithtimmytim

Let's Learn CSS Grid - FEDC

Let's Learn CSS Grid - FEDC

Want more?

Transcript