How CSS Grid Changes Everything

How CSS Grid Changes Everything (in 15 mins?) W3C Developer
Meetup @jenSimmons

Follow @jensimmons for slides

Layout on the Web

photo by Brad Frost, 2012, CC BY 2.0

The Official Timeline of Web Page Layout The No-Layout Layout
Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms
Object Fit Clip-path Masking Shape-outside Initial-letter Flow Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else in CSS

This new CSS changes everything in web layout.

labs.jensimmons.com

Grid makes it much easier to implement the same old
layouts.

Grid makes it possible to do layouts that were not
possible before.

Nature of CSS Grid

explicit vs. implicit

You deﬁne !e size and/or number of rows and/or columns
Let !e browser deﬁne number or size of rows or columns

Place each "em   into a speciﬁc   cell or
area Let !e browser place each "em using auto-placement algor"hm

Rows *and* Columns

ROWS!!!!!!!!!!!

Tracks don’t have to all be the same size.

Content sized by the size of a track.

Tracks sized by the size of content.

portion of available   space — 2 parts set by
  content size ﬁxed portion of available   space — 1 part

Grid Code

Grid Container

Grid Items

<body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>
</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: subgrid; } article { display: subgrid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }

Headline Here This is teaser text. It comes in different
lengths. Headline Here This is teaser text. It comes in different lengths. Here we see more content filling the box up all the way. Headline This is teaser text. Headline That is Longer & Wraps This is teaser text. It comes in different lengths. Headline This Headline This is teaser text. It comes in different lengths.

labs.jensimmons.com

Container Item Item Item

Terminology

Grid Container

Grid Items

Grid Line Grid Track Grid Track Grid Line Grid Line
Grid Line Grid Line Grid Area Grid Cell

Grid Line Grid Track Grid Line Grid Line Grid Line
Grid Line Grid Gap Grid Gap Grid Gap Grid Track

4 Examples

labs.jensimmons.com/2017/01-003.html

ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }
li { // nothing }

ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; }
/* or */ ul { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-gap: 4px; }

ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 0.25em; }
/* or */ ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0.25em; }

ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem;
}

nightly.mozilla.org

ul { display: grid; grid-template-columns: repeat(4, 1fr); }

li:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 2;
}

li:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 2;
} li:nth-child(2) { grid-column: 4 / 5; grid-row: 2 / 3; } li:nth-child(3) { grid-column: 3 / 4; grid-row: 3 / 4; } li:nth-child(4) {…} li:nth-child(5) {…}

‘fr’ unit

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } some
other syntax options (each with different results) grid-template-columns: 1fr 5fr 2.5fr; grid-template-columns: 8em 1fr 300px; grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr; grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(3, 200px 1fr 25%); grid-template-columns: repeat(auto-fill, 10rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: 4rem 2fr repeat(5, 1fr) 300px;

px em % pixels (or rem) percents 60px 10em 20%

min-content max-content fr minmax()

fr unit = “fraction”

100% 33% 33% 33%

100% 33.33333% 33.33333% 33.33333%

100% 33% 33% 33% 2% 2%

100% 32% 32% 32% 2% 2% 100% – 4% =
96% = 32% 3 3

100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% =
94% = 31.333% 3 3

100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% =
95% = 31.666666666666666% 3 3

.box { width: calc(100-(2*2em)/3)%;} 100% x% x% x% 2em 2em
@media (min-width: 600px) { .box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}

100% 1fr 1fr 1fr 2em 2em

1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr
= 3fr total therefore, 1fr = 1/3 of the space

1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr
+ 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em

100px 1fr 1fr 1fr 1fr 100px

2fr 1fr 50px 1fr min-content

6fr 2.4fr 1fr 2.4fr 2fr

What about old browsers?

You must support browsers that   do not understand  
CSS Grid.

@supports (foo: value) { // some CSS code here }

// code for non-Grid browsers @supports (display: grid) { //
undo some of the above // then do your Grid layout }

hacks.mozilla.org/2016/08/using-feature-queries-in-css

You have two choices for   Internet Explorer (& old
Edge): 1) Leverage the 2012 Grid implementation. 2) Pretend IE has no Grid.

You have two choices for   Internet Explorer (& old
Edge): 1) Use old -ms-* syntax. 2) Or don’t.

display: grid; grid-template-columns: repeat(4, 100px); display: -ms-grid; -ms-grid-columns: (100px)[4];

Autoprefixer

rachelandrew.co.uk/archives/2016/11/26/should-i-try- to-use-the-ie-implementation-of-css-grid-layout

For more…

jensimmons.com/post/feb-27-2017/learn-css-grid

developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

Modern Layouts:   Getting Out of Our Ruts Revolutionize Your
Page:   Real Art Direction on the Web 2015 2016 available on jensimmons.com

jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!

How CSS Grid Changes Everything

How CSS Grid Changes Everything

More Decks by Jen Simmons

Other Decks in Technology

Featured

Transcript