For far too long we’ve been forced to reuse layout patterns that have worked in the past, creating a web full of sites that all look the same. Lack of browser support, no true layout system, and designers who are forced to make safe decisions for budget or timeline reasons have led us to create work that is rarely creative nor inspiring. I’ve spent years exploring how we can make the web a more unique space. Many CSS properties have been overlooked, but support has grown and many of these features are available now or can be used as enhancements. One of these new features is CSS Grid Layout, which will play a major role in layout design. Having a true, 2 dimensional grid will give our layouts much more flexibility and it is on us to explore the possibilities.

1. GreatTHE
Design
S TATE O F
with CSS Grid Layout and friends
Front-End Camp 2017

2. display: none !important;
classification
job titles

6. shape-outside

11. ?
Is web design a
solved problem

12. ‘‘ Douglas Adams
I love the whooshing noise they
make as they go by.
I love deadlines.

14. craft & create
Artist
Spotlight
Shyama Golden
Shyama Golden,1
known for her huge,
humorous paintings, has transitioned from
being a graphic designer to an illustrator and,
more recently, from oil paints to the iPad.
interview Elliot Jay Stocks
artwork courtesy of Shyama Golden
D
id you always want to be an illustrator?
Yes—I’ve been drawing ever since I was really
little, but I studied graphic design when I went to col-
lege, and pretty much worked solely on graphic design
for 10 years after that. However, the school I went to
was really focused on studio art; it was more traditional,
I think, than most schools. I did a lot of screen printing
too, which I love because it uses both the problem-
solving skills of a designer and the drawing skill of an
illustrator. I stuck with graphic design for a really long
time, but there was always a part of me that wanted to
draw more.
Recently I’ve transitioned into doing that: these days
I do branding and identity design as a part-time job, and
spend most of my time doing illustration. Even with
80
1. shyamagolden.com

16. .intro::first-letter {
initial-letter: 7;
}
initial-letter
::first-letter
7

18. @supports (property: value) {
property: value;
}
@supports ( property: value )
feature queries

19. @supports (initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
}
}
initial letter

20. @supports (initial-letter: 7)
or (-webkit-initial-letter: 7) {
.intro::first-letter {
initial-letter: 7;
-webkit-initial-letter: 7;
}
}
initial letter

21. ::initial-letter::initial-letter

22. ::initial-letter::initial-letter

24. blending mode
background-blend-mode: value ;
background-blend-mode:
multiply;

30. Shape-inside

33. h1 {
}
background-color: #fff;
mix-blend-mode: screen;

34. .bg {
}
filter: sepia(30%);

35. css filter

36. http://codepen.io/stacy/pen/86840fb6d32b941a73e5435f4f27d4e9?editors=1100

38. shape-outside: circle();
geometric shapes that can be applied to floated elements
css shapes

40. CSS Shapes

46. prevents a portion of an element from getting displayed
clip-path
clip-path: url(#svgname);

47. clip-path: $path;
shape-outside: $path;

61. css “layout” methods
history
tables flexbox
floats grid

62. flexbox
or

69. grid-template-columns
rows
size, size, … ;
grid-template-columns:
25% 50% 25%;

70. fraction unit
fr
calculation of the remaining
space after any fixed items have
been accounted for

71. grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {
1fr 2fr 1fr

72. grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

73. grid-template-columns:
25% 50% 25%;
display: grid;
.grid-parent {

74. grid-gap: 1rem;
grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

75. display: grid;
.grid-parent {
grid-gap: 1rem;
grid-template-columns:
25% 50% 25%;

76. grid-template-columns:
1fr 2fr 1fr;
display: grid;
.grid-parent {

77. grid-template-columns:
1fr 2fr 50vw;
display: grid;
.grid-parent {

78. grid-template-columns:
1fr 2fr 50vw 100px;
display: grid;
.grid-parent {

79. display: grid;
.grid-parent {
grid-template-columns:
1fr 2fr 50vw 100px 12rem;

80. display: grid;
.grid-parent {
grid-template-columns:
1fr 2fr 50vw 100px 9rem 5%;

81. grid-template-columns:
1fr 1fr 1fr;
display: grid;
.grid-parent {

82. repeat( number of repitions, size )
repeat
grid-template-columns:
repeat(3, 1fr);

83. grid-template-columns:
repeat(3, 1fr);
display: grid;
.grid-parent {

84. grid-column-start / grid-column-end | grid-column: value;
grid-column: 1 / 4;
grid-column

85. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column-start: 1;
.grid-cell {
}

86. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column-start: 1;
.grid-cell {
grid-column-end: 4;
}

87. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / 4;
.grid-cell {
}

88. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / span 3;
.grid-cell {
}

89. span
span number ;
grid-column: 1 / span 3;

90. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / -1;
.grid-cell {
}

91. -x
grid-column: 1 / -1;
-x = span x number of tracks counting from opposite end

92. 3 2 1
grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-column: 1 / -3;
.grid-cell {
}

93. grid-row-start / grid-row-end | grid-row: value;
grid-row
grid-row: 1 / 4;

94. grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row-start: 1 ;
.grid-cell {
}

95. grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row-start: 1 ;
grid-row-end: 3 ;
.grid-cell {
}

96. grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / 3 ;
.grid-cell {
}

97. grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / span 2;
.grid-cell {
}

98. grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-row: 1 / - 1;
.grid-cell {
}

99. grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area
grid-area: 1/1/3/4;

100. grid-template-columns: repeat(4, 1fr);
display: grid;
.grid-parent {
}
grid-area: 1 / 1 / 4 / 3 ;
.grid-cell {
}

101. [ line-name ] size [ naming-is-hard another-name ] size
named lines
grid-column:naming-is-hard;

102. grid-template-columns: 1fr [ohyeah] 1fr 1fr [ok] 1fr;
display: grid;
.grid-parent {
}
grid-column: ohyeah / ok;
.grid-cell {
}

103. grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: row-main /
col-large /
row-gallery /
col-small;
grid-area

104. “header”
“byline”
“content”
“aside”
“footer”;
grid-template-areas:

105. header {
grid-area: header;
}
grid-area
named area

107. “header header header”
“content content byline”
“………………… aside ………………”
“footer footer footer”;
grid-template-areas:

110. size
grid-auto-rows: 30vh;
grid-auto-columns
rows

111. row - fill in each row in turn, adding new rows as necessary
column - fill in each column in turn, adding new columns as necessary
dense - fill in holes earlier in the grid if smaller items come up later
sparse | dense & row | column
grid-auto-flow

114. grid-auto-flow
grid-auto-flow: dense;
sparse | dense & row | column

115. grid-template-columns: repeat(3, 1fr);
display: grid;
.grid-parent {
}
grid-auto-flow: dense;

116. minmax
minmax( min size, max size )
grid-auto-rows:
minmax(100px, 300px);

117. auto-fill
repeat( auto-fill, size )
grid-template-columns:
repeat(auto-fill, 1fr);

118. put it all together
repeat( auto-fill, minmax( min size, max size ) )
grid-template-rows:
repeat(auto-fill,
minmax(300px, 1fr));

119. grid-gap
grid-column-gap | grid-row-gap: size
grid-gap:30px;
px, rem, em, %

122. .gallery {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));
grid-auto-rows: minmax(26vh, 190px);
}

123. display: grid;

124. grid-gap: 1rem;

125. grid-template-columns:
repeat(auto-fill,
minmax(200px, 1fr));

126. grid-auto-rows:
minmax(26vh, 190px);

129. flexbox or grid?

133. css exclusions
arbitrary areas around which inline content can flow

136. css regions
Allow content from one or more elements to flow
through one or more boxes called CSS Regions.

137. CSS Regions
CSS Regions and Exclusions

140. Noooooo!

141. css regions + exclusions

142. Wilson Miner
“When We Build”
‘‘We’re actually in the
process of building an
environment where we’ll
spend most of our time for
the rest of our lives …

143. igalia.github.io/css-grid-layout/gridbyexample.com
labs.jensimmons.com
codepen.io/collection/XRRJGq
resources
css-tricks guide to grid
drafts.csswg.org/css-grid/
codepen.io/collection/DjVBvr

144. Stacy Kvernmo
@StacyKvernmo
GreatTHE
Design
S TATE O F