web designer / front-end...
TRANSCRIPT
![Page 1: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/1.jpg)
#msedgesummit
Melanie RichardsWeb designer / front-end developer
@somelaniesaid
melanierichards
![Page 2: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/2.jpg)
#msedgesummit
CSS Grid: bringing true two-
dimensional layout to the web
![Page 3: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/3.jpg)
#msedgesummit
![Page 4: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/4.jpg)
#msedgesummit
![Page 5: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/5.jpg)
#msedgesummit
![Page 6: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/6.jpg)
#msedgesummit
![Page 7: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/7.jpg)
#msedgesummit
Photo by fsHH on Pixabay
FLOATS
![Page 8: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/8.jpg)
DISPLAY: INLINE-BLOCK
#msedgesummit
Photo by Mabuya on Pixabay
![Page 9: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/9.jpg)
MULTI-COLUMN
#msedgesummit
Photo by JacLou on Pixabay
![Page 10: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/10.jpg)
POSITION:
ABSOLUTE
#msedgesummit
Photo by Teerasuwat Jiratarawat
![Page 11: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/11.jpg)
#msedgesummit
WHERE THERE’S A WILL, THERE’S A WAY
TO WRITE SOME HACKY CODE.
![Page 12: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/12.jpg)
#msedgesummit
ENTER FLEXBOX
![Page 13: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/13.jpg)
#msedgesummit
Good stretching doggo
By Kapa65 on Pixabay
MAIN AXIS
![Page 14: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/14.jpg)
#msedgesummit
Good stretching doggo
By Kapa65 on Pixabay
![Page 15: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/15.jpg)
#msedgesummit
Good stretching doggo
By Kapa65 on Pixabay
![Page 16: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/16.jpg)
#msedgesummit
CROSS AXIS
Good stretching doggo
By Kapa65 on Pixabay
![Page 17: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/17.jpg)
#msedgesummit
Good stretching doggo
By Kapa65 on Pixabay
![Page 18: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/18.jpg)
#msedgesummit
Good stretching doggo
By Kapa65 on Pixabay
![Page 19: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/19.jpg)
#msedgesummitPhoto by ktphotography on Pixabay
CSS Grid
![Page 20: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/20.jpg)
#msedgesummit
![Page 21: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/21.jpg)
#msedgesummit
![Page 22: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/22.jpg)
HOW GRID WORKS
#msedgesummit
![Page 23: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/23.jpg)
#msedgesummit
“TOP DOWN” LAYOUT
![Page 24: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/24.jpg)
display: grid
display: inline-grid
#msedgesummit
1. INITIALIZE GRID FORMATTING-CONTEXT
![Page 25: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/25.jpg)
#msedgesummit
2. DEFINE GRID VIA PARENT’S PROPERTIES
grid-template-rows
grid-template-columns
grid-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid
![Page 26: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/26.jpg)
#msedgesummit
2. DEFINE GRID VIA PARENT’S PROPERTIES
“Tracks”:
rows and columns
![Page 27: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/27.jpg)
#msedgesummit
2. DEFINE GRID VIA PARENT’S PROPERTIES
2 grid lines per track:
-start and -end
![Page 28: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/28.jpg)
#msedgesummit
2. DEFINE GRID VIA PARENT’S PROPERTIES
grid-template-areas
![Page 29: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/29.jpg)
#msedgesummit
3. PLACE AND ALIGN GRID ITEMS IN “SLOTS”
grid-row
grid-column
grid-area
grid-row-start, -end
grid-column-start, -end
![Page 30: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/30.jpg)
#msedgesummit
3. PLACE AND ALIGN GRID ITEMS IN “SLOTS”
justify-self
align-self
![Page 31: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/31.jpg)
#msedgesummit
JUSTIFY VS. ALIGN PROPERTIES
horizontal writing mode
(e.g. English)JUSTIFY
ALIGN
![Page 32: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/32.jpg)
#msedgesummit
JUSTIFY VS. ALIGN PROPERTIES
vertical writing mode
(e.g. Japanese)ALIGN
JUSTIFY
![Page 33: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/33.jpg)
#msedgesummit
4. SIZE AND DISTRIBUTE THE GRID!
grid-row-gap
grid-column-gap
grid-gap
![Page 34: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/34.jpg)
#msedgesummit
4. SIZE AND DISTRIBUTE THE GRID!
justify-items
align-items
justify-content
align-content
![Page 35: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/35.jpg)
#msedgesummit
4. SIZE AND DISTRIBUTE THE GRID!
justify-items
align-items
justify-content
align-content
![Page 36: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/36.jpg)
BASIC EXAMPLE WITH
EXPLICIT PLACEMENT
#msedgesummit
![Page 37: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/37.jpg)
#msedgesummit
Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum,
massa sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac
habitasse platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna.
Fusce id ex commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus
facilisis. Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum
non. Nunc ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id
molestie ut, dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Etiam scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna
justo, iaculis ac imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra.
Aenean tempor dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus
aliquet ligula leo, eu viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor
magna consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam
suscipit tempus blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed
justo volutpat interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh
imperdiet lorem, sed interdum sem orci a mi.
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi
condimentum tortor, quis
convallis lacus libero elementum
tortor. Cras vitae nulla semper,
elementum mauris id, semper
lectus. Maecenas consequat felis
et suscipit sollicitudin. Ut
accumsan sit amet mauris at
aliquet. Mauris iaculis magna
quis lectus rhoncus, vel convallis
elit tristique. Pellentesque
blandit quam a tincidunt ornare.
Aenean fermentum, sem non
placerat viverra, velit ligula
iaculis turpis, sit amet rhoncus
nisi diam ac diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras
consectetur turpis eget feugiat
ornare. Maecenas ac lorem
pulvinar, varius nunc non,
sagittis nibh. Vestibulum quis
dignissim sapien, sed commodo.
They’re
good
dogs.
1. Chasing squirrels
2. Horking down food
3. Chewing on things
4. Asserting authority
5. Cuddles
6. Intellectual discourse
Things dogs like:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi
condimentum tortor, quis
convallis lacus libero elementum
tortor. Cras vitae nulla semper,
elementum mauris id, semper
lectus. Maecenas consequat felis
et suscipit.
![Page 38: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/38.jpg)
1. Chasing squirrels
2. Horking down food
3. Chewing on things
4. Asserting authority
5. Cuddles
6. Intellectual discourse
Things dogs like:
#msedgesummit
<main class=“parent”>
<section class=“child-1”></section>
<section class=“child-2”></section>
<section class=“child-3”></section>
<section class=“child-4”></section>
<section class=“child-5”></section>
</main>Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa
sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse
platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex
commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.
Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc
ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,
dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam
scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac
imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor
dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu
viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna
consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus
blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat
interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed
interdum sem orci a mi.
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
They’re
good
dogs.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit. Lorem
ipsum dolor sit amet,
![Page 39: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/39.jpg)
#msedgesummit
.parent {
display: grid;
}
![Page 40: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/40.jpg)
#msedgesummit
.parent {
display: grid;
grid-template-columns:
22em 1fr 22em;
}
1fr 22em22em
![Page 41: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/41.jpg)
#msedgesummit
2fr 1fr
.parent {
display: grid;
grid-template-columns:
22em 2fr 1fr 22em;
}
![Page 42: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/42.jpg)
#msedgesummit
.parent {
display: grid;
grid-template-rows:
1fr 1fr 1fr;
grid-template-columns:
22em 2fr 1fr 22em;
}
1fr
1fr
1fr
![Page 43: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/43.jpg)
.parent {
display: grid;
grid-template-rows:
repeat(3, 1fr);
grid-template-columns:
22em 2fr 1fr 22em;
}
#msedgesummit
1fr
1fr
1fr
![Page 44: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/44.jpg)
#msedgesummit
.parent {
display: grid;
grid-template-rows:
1fr 1fr 1fr;
grid-template-columns:
22em 2fr 1fr 22em;
grid-gap: 1.5em;
}
![Page 45: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/45.jpg)
#msedgesummit
.parent {
display: grid;
grid-template-rows:
1fr 1fr 1fr;
grid-template-columns:
22em 2fr 1fr 22em;
grid-gap: 3em 1.5em;
}
![Page 46: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/46.jpg)
#msedgesummit
![Page 47: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/47.jpg)
#msedgesummit
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
.child-1 {
grid-row: 1 / span 3;
grid-column: 1;
}
![Page 48: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/48.jpg)
#msedgesummit
.child-2 {
grid-row: 1 / span 3;
grid-column: 2;
}
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa
sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse
platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex
commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.
Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc
ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,
dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam
scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac
imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor
dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu
viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna
consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus
blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat
interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed
interdum sem orci a mi.
![Page 49: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/49.jpg)
#msedgesummit
They’re
good
dogs.
.child-3 {
grid-row: 1;
grid-column: 3;
}
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa
sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse
platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex
commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.
Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc
ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,
dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam
scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac
imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor
dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu
viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna
consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus
blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat
interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed
interdum sem orci a mi.
![Page 50: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/50.jpg)
#msedgesummit
.child-4 {
grid-row: 2;
grid-column: 3;
}1. Chasing squirrels
2. Horking down food
3. Chewing on things
4. Asserting authority
5. Cuddles
6. Intellectual discourse
Things dogs like:
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa
sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse
platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex
commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.
Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc
ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,
dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam
scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac
imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor
dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu
viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna
consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus
blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat
interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed
interdum sem orci a mi.
They’re
good
dogs.
![Page 51: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/51.jpg)
#msedgesummit
.child-5 {
grid-row: 3;
grid-column: 3;
}
1. Chasing squirrels
2. Horking down food
3. Chewing on things
4. Asserting authority
5. Cuddles
6. Intellectual discourse
Things dogs like:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae nulla
semper, elementum mauris id,
semper lectus. Maecenas
consequat felis et suscipit. Lorem
ipsum dolor sit amet,
Bork!
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse sit amet neque
mattis, bibendum ligula et,
dignissim tortor. Aenean auctor
sodales ex, vitae suscipit mauris
ullamcorper nec. Vivamus
commodo elit ac ante mattis, ac
lobortis lacus interdum. Sed
condimentum, nisl in posuere
aliquam, lacus nisi condimentum
tortor, quis convallis lacus libero
elementum tortor. Cras vitae
nulla semper, elementum mauris
id, semper lectus. Maecenas
consequat felis et suscipit
sollicitudin. Ut accumsan sit
amet mauris at aliquet. Mauris
iaculis magna quis lectus
rhoncus, vel convallis elit
tristique. Pellentesque blandit
quam a tincidunt ornare. Aenean
fermentum, sem non placerat
viverra, velit ligula iaculis turpis,
sit amet rhoncus nisi diam ac
diam.
Nam id velit ac lectus maximus
dictum sagittis vitae sem.
Vivamus feugiat rutrum nibh
ultrices pharetra. Sed commodo
finibus eros quis ornare. Nulla
cursus suscipit neque, in suscipit
ipsum varius ut. Cras consectetur
turpis eget feugiat ornare.
Maecenas ac lorem pulvinar,
varius nunc non, sagittis nibh.
Vestibulum quis dignissim
sapien, sed commodo.
Ut metus augue, interdum quis varius ut, commodo sit amet purus. Quisque dignissim sem ac
pharetra facilisis. Cras ut efficitur nibh. Praesent eget elementum nibh. Vestibulum elementum, massa
sed euismod vestibulum, dui purus eleifend orci, vitae accumsan erat turpis a nulla. In hac habitasse
platea dictumst. Quisque lorem diam, congue vitae lobortis at, vulputate sed urna. Fusce id ex
commodo, imperdiet est a, tempor orci. Duis rutrum et nisi nec sodales.
Donec maximus sit amet velit consectetur suscipit. Nunc ornare urna lobortis dolor cursus facilisis.
Phasellus congue efficitur volutpat. Quisque ultrices risus velit, vitae cursus enim rutrum non. Nunc
ornare eleifend lectus, vitae pulvinar augue lacinia at. Fusce arcu dolor, vulputate id molestie ut,
dignissim sit amet erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam
scelerisque convallis enim, nec pellentesque ante egestas vitae. Curabitur urna justo, iaculis ac
imperdiet vel, posuere quis orci. Quisque finibus imperdiet sem finibus pharetra. Aenean tempor
dignissim nisi ut interdum. Fusce molestie leo sed enim mollis tempus. Phasellus aliquet ligula leo, eu
viverra augue vulputate sed.
Maecenas maximus ante non arcu rhoncus ultricies. In ornare commodo urna, vitae tempor magna
consequat eu. Etiam dolor risus, scelerisque a risus id, viverra luctus tortor. Aliquam suscipit tempus
blandit. Vestibulum luctus tortor at molestie condimentum. Donec eu justo sed justo volutpat
interdum sit amet a elit. Praesent fermentum, nibh eu rhoncus semper, eros nibh imperdiet lorem, sed
interdum sem orci a mi.
They’re
good
dogs.
![Page 52: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/52.jpg)
GRID AREAS
#msedgesummit
![Page 53: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/53.jpg)
.parent {
grid-template-rows:
1fr auto 4em 1fr;
}
#msedgesummit
auto
1fr
1fr
4em
![Page 54: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/54.jpg)
.parent {
grid-template-rows:
1fr auto 4em 1fr;
grid-template-columns:
6em 16em auto;
}
#msedgesummit
6em 16em auto
![Page 55: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/55.jpg)
.parent {
grid-template-rows:
1fr auto 1fr;
grid-template-columns:
6em 16em auto;
grid-template-areas:
“logo nav nav”
“side side main”
“side side social”
“foot foot foot”
}
#msedgesummit
![Page 56: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/56.jpg)
.parent {
grid-template-rows:
1fr auto 1fr;
grid-template-columns:
6em 16em auto;
grid-template-areas:
“logo nav nav”
“side side main”
“side side social”
“foot foot foot”
}
#msedgesummit
nav
side main
social
foot
![Page 57: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/57.jpg)
#msedgesummit
nav
side main
social
foot
.logo {grid-area: logo;}
.nav {grid-area: nav;}
.sidebar {grid-area: side;}
.main {grid-area: main;}
.social {grid-area: social;}
.footer {grid-area: foot;}
![Page 58: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/58.jpg)
IMPLICIT PLACEMENT
AND AUTO-FILL/FIT
#msedgesummit
![Page 59: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/59.jpg)
#msedgesummit
![Page 60: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/60.jpg)
#msedgesummit
.posts {
grid-template-columns:
repeat(auto-fit,
minmax(12em, 1fr));
}
.post-preview:first-child {
grid-column: 1 / span 2;
}
![Page 61: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/61.jpg)
.posts {
grid-template-columns:
repeat(auto-fit,
minmax(12em, 1fr));
}
.post-preview:first-child {
grid-column: 1 / span 2;
}
#msedgesummit
![Page 62: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/62.jpg)
.posts {
grid-template-columns:
repeat(auto-fit,12em);
}
.post-preview:first-child {
grid-column: 1 / span 2;
}
#msedgesummit
![Page 63: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/63.jpg)
.posts {
grid-template-columns:
repeat(auto-fit, 12em);justify-items: center;
}
#msedgesummit
![Page 64: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/64.jpg)
.posts {
grid-template-columns:
repeat(auto-fit, 12em);justify-items: space-between;
}
#msedgesummit
![Page 65: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/65.jpg)
#msedgesummit
.posts {
grid-template-columns:
repeat(auto-fit, 12em);justify-items: center;
}
![Page 66: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/66.jpg)
.posts {
grid-template-columns:
repeat(auto-fill, 12em);
}
#msedgesummit
![Page 67: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/67.jpg)
EXPLICIT AND AUTO TRACKS
#msedgesummit
![Page 68: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/68.jpg)
#msedgesummit
![Page 69: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/69.jpg)
#msedgesummit
.album {
grid-template-rows:
repeat(3, auto);
grid-auto-rows: 12em;
}
![Page 70: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/70.jpg)
#msedgesummit
.album img {
justify-self: stretch;
align-self: stretch;
object-fit: cover;
}
![Page 71: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/71.jpg)
#msedgesummit
.album img:nth-child(4) {
align-self: center;
}
![Page 72: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/72.jpg)
#msedgesummit
.album img:nth-child(4) {
align-self: self-end;
}
![Page 73: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/73.jpg)
FIT-CONTENT
#msedgesummit
![Page 74: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/74.jpg)
#msedgesummit
![Page 75: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/75.jpg)
#msedgesummit
.reqs {
grid-template-columns:
fit-content(20em) 50em;
justify-content: center;
}
![Page 76: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/76.jpg)
#msedgesummit
.reqs {
grid-template-columns:
fit-content(20em) 50em;
justify-content: center;
}
![Page 77: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/77.jpg)
MIX IT ALL TOGETHER
#msedgesummit
![Page 78: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/78.jpg)
#msedgesummit
![Page 79: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/79.jpg)
#msedgesummit
aka.ms/more-grid-1Jen Simmons
![Page 80: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/80.jpg)
#msedgesummit
aka.ms/more-grid-2Dudley Storey
![Page 81: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/81.jpg)
#msedgesummit
aka.ms/more-grid-3Chen Hui Jing
![Page 82: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/82.jpg)
#msedgesummit
aka.ms/more-grid-4liamj on Codepen
![Page 83: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/83.jpg)
#msedgesummit
LEARN MORE
aka.ms/grid-spec
gridbyexample.com
![Page 84: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/84.jpg)
What about…
#msedgesummit
![Page 85: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/85.jpg)
BROWSER SUPPORT?
#msedgesummit
![Page 86: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/86.jpg)
NEW SYNTAX ON BY DEFAULT IN
#msedgesummit
caniuse.com/#feat=css-grid
Oct 2017 57+ 52+ 10.1+
![Page 87: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/87.jpg)
ORIGINAL PREFIXED SYNTAX SUPPORTED IN
#msedgesummit
caniuse.com/#feat=css-grid
All 10+
![Page 88: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/88.jpg)
NOTABLE BROWSERS W/O SUPPORT
#msedgesummit
caniuse.com/#feat=css-grid
![Page 89: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/89.jpg)
ORIGINAL GRID SYNTAX?
#msedgesummit
![Page 90: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/90.jpg)
#msedgesummit
NEW ORIGINAL
display: grid display: -ms-grid
grid-template-columns -ms-grid-columns
grid-template-rows -ms-grid-rows
grid-column -ms-grid-column,
-ms-grid-column-span
grid-row -ms-grid-row,
-ms-grid-row-span
justify-content
(assuming horizontal writing mode)
-ms-grid-column-align
align-content
(assuming horizontal writing mode)
-ms-grid-row-align
![Page 91: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/91.jpg)
#msedgesummit
NEW ORIGINAL
order
Named grid lines
repeat() value with auto-fill and
auto-fit keywords
grid-auto-rows, grid-auto-columns
grid-auto-flow
grid-gap, etc.
justify-items
align-items
![Page 92: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/92.jpg)
POLYFILS AND FALLBACKS?
#msedgesummit
![Page 93: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/93.jpg)
#msedgesummit
Photo by Wortley on Pixabay
GO FORTH AND
PROGRESSIVELY ENHANCE
![Page 94: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/94.jpg)
#msedgesummit
@supports (display: grid) {
}
@supports (display: grid) or (display: -ms-grid) {
}
![Page 95: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/95.jpg)
#msedgesummit
@supports (display: grid) and (not(display: -ms-grid)) {
}
WARNING!
THIS WILL ONLY LEAD TO SADNESS:
![Page 96: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/96.jpg)
#msedgesummit
@supports (display: grid) {
}
THIS IS ALL YOU NEED:
![Page 97: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/97.jpg)
HOW TO CONVINCE CLIENTS AND
STAKEHOLDERS ON PROGRESSIVE
ENHANCEMENT?
#msedgesummit
![Page 98: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/98.jpg)
#msedgesummit
Styletil.es
![Page 99: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/99.jpg)
#msedgesummit
DESIGN PARITY
DESIGN BUG FIXES
BASIC FUNCTIONALITY
![Page 100: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/100.jpg)
#msedgesummit
Photo by Michael Goele
![Page 101: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/101.jpg)
#msedgesummit
Photo by Steve Buissinne
![Page 102: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/102.jpg)
#msedgesummit
Photo by danfador on Pixabay
![Page 103: Web designer / front-end developervideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/08… · #msedgesummit CSS Grid: bringing true two-dimensional layout to the web](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec5ee1de9422601c50f8049/html5/thumbnails/103.jpg)
#msedgesummit
Thank you!
aka.ms/summit-grid
@somelaniesaid
melanierichards