![Page 1: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/1.jpg)
Post-Modern CSSIN-DEPTH ON GRID LAYOUT, FLEXBOX & OTHER NEW PROPERTIES
![Page 2: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/2.jpg)
Wait. Post-Modern?LIKE… ANDY WARHOL?
![Page 3: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/3.jpg)
Wait. Post-Modern?LIKE… ANDY WARHOL? SORTA.
![Page 4: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/4.jpg)
“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.”
– Jean-François Lyotard
![Page 5: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/5.jpg)
“Postmodernism was a reaction to modernism. Where modernism was about objectivity, postmodernism was about subjectivity. Where modernism sought a singular truth, postmodernism sought the multiplicity of truths.”
– Miguel Syjuco
![Page 6: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/6.jpg)
Why Post-Modern?A VERY BRIEF HISTORY OF THE ERAS OF THE WEB AND CSS
![Page 7: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/7.jpg)
Pre-HistoryPOINT-TO-POINT CONNECTIONS; BULLETIN BOARDS; RESEARCHERS
![Page 8: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/8.jpg)
The Classical EraHTTP; HTML; THE BROWSER; SIR TIM BERNERS-LEE
![Page 9: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/9.jpg)
The Middle AgesOR THE RISE AND FALL OF CSS
![Page 10: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/10.jpg)
The Modern EraHTML5; CSS3; ADVANCED JS; FRAMEWORKS
![Page 11: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/11.jpg)
PostmodernityADVANCED LAYOUT; RE-EMERGENCE OF UNIQUE DESIGN
![Page 12: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/12.jpg)
“Postmodernism was a reaction to modernism. Where modernism was about objectivity, postmodernism was about subjectivity. Where modernism sought a singular truth, postmodernism sought the multiplicity of truths.”
– Miguel Syjuco
![Page 13: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/13.jpg)
Our Objectivism
![Page 14: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/14.jpg)
SOURCE: HTTP://ADVENTUREGA.ME/BOOTSTRAP/
![Page 15: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/15.jpg)
“Simplifying to the extreme, I define postmodern as an incredulity toward metanarratives.”
– Jean-François Lyotard
![Page 16: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/16.jpg)
Our Metanarrative
![Page 17: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/17.jpg)
“CSS Sucks”-EVERY DEVELOPER EVER
![Page 18: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/18.jpg)
The Rise and Fall of CSSTHE BATTLE OVER STYLE SHEETS AND IMPLEMENTATION
![Page 19: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/19.jpg)
CSS Starts Strong1994: CSS1 Spec starts
1996: CSS1 Spec complete (IE3
kinda adopts)
2000: IE5 reaches 99% CSS1
adoption
![Page 20: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/20.jpg)
The middle part, not so much1998: CSS2 Spec first WD
2000: CSS2 Becomes
Recommendation
2000-07: CSS2/2.1 turmoil and
back and forth
2011: CSS2.1 Finally finished and
published
SOURCE: HTTP://LEARNCSS.INFO/
![Page 21: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/21.jpg)
Why CSS3 is betterTHE SECRET SAUCE IS MODULES
SOURCE: MDN
![Page 22: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/22.jpg)
• The CSS Saga • The Evolution of CSS
Further Reading
![Page 23: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/23.jpg)
The New HotnessTODAY’S GOAL: ADOPT ONE OF THESE PROPERTIES
![Page 25: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/25.jpg)
CSS GradientsWHY USE IMAGES WHEN CSS CAN DO AMAZING THINGS?
![Page 26: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/26.jpg)
Support (GO FOR IT!)
![Page 27: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/27.jpg)
body { background-image: linear-gradient(#F46035, #7E311C);}
![Page 28: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/28.jpg)
body { background-image: linear-gradient(45deg, #F46035, #7E311C);}
![Page 29: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/29.jpg)
body { background-image: linear-gradient(to bottom, #F46035, #7E311C 50%, #F46035 70%);}
![Page 30: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/30.jpg)
body { background-image: radial-gradient(#F46035, #7E311C);}
![Page 31: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/31.jpg)
body { background-image: radial-gradient(circle at 10% 0, #F46035, #7E311C 50%);}
![Page 32: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/32.jpg)
body { background-image: repeating-linear-gradient(to top right, #F46035, #F46035 20px, #7E311C 20px, #7E311C 40px);}
![Page 33: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/33.jpg)
body { background-image: repeating-linear-gradient(to top right, #F46035, #F46035 20px, #7E311C 20px, #7E311C 40px);}
![Page 34: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/34.jpg)
repeating-linear-gradient(to top right, #F46035, #F46035 20px, #7E311C 20px, #7E311C 40px
);
![Page 35: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/35.jpg)
repeating-linear-gradient([direction], [first color] #F46035, [first color again to fight fade] #F46035 20px, [second color] #7E311C 20px, [second color again to fight fade] #7E311C 40px
);
![Page 36: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/36.jpg)
CSS ShapesMAKING FLOATING IMAGES INTERESTING AGAIN
![Page 37: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/37.jpg)
Support (USE BUT DON’T DEPEND ON)
![Page 38: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/38.jpg)
<main class="container angled"> <div class="circle"></div> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>
![Page 39: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/39.jpg)
shape-outside(circle, polygon, url, content-box)
SHAPE-INSIDE COMING IN LEVEL 2
![Page 40: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/40.jpg)
.circle { float: left; shape-outside: circle(); margin: 0 3em .5em 0;}
![Page 41: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/41.jpg)
<main class="container angled"> <div class="polygon"></div> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>
![Page 42: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/42.jpg)
.polygon { float: left; width: 200px; height:400px; shape-outside: polygon(22% 0, 23% 18%, 79% 25%, 90% 36%, 66% 56%, 75% 80%, 28% 101%, 45% 60%, 45% 40%);}
POLYGON CREATOR: HTTP://BENNETTFEELY.COM/CLIPPY/
![Page 43: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/43.jpg)
<main class="container angled"> <img src=“Image.png” alt="" /> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>
![Page 44: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/44.jpg)
img { float: left; shape-outside: url(mask.png); shape-margin: 10px;}
![Page 45: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/45.jpg)
<main class="container angled"> <aside class="left"></aside> <aside class="right"></aside> <h1></h1> <p>…</p> <p>…</p> <p>…</p></main>
![Page 46: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/46.jpg)
.left { float:left; width: 20%; height: 730px; shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}
.right { float: right; width: 20%; height: 730px; shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}
![Page 47: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/47.jpg)
FlexboxTRULY RESPONSIVE UNI-DIRECTIONAL LAYOUT
![Page 48: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/48.jpg)
Support (USE UNLESS <IE10 IS IMPORTANT)
![Page 49: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/49.jpg)
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div></div>
DEFAULT: BLOCK-LEVEL
![Page 50: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/50.jpg)
.container { width: 510px; margin: 0 auto; background: lightblue;}.box { background-color: tomato; margin: 20px 0; padding: 20px; color: white;}
DEFAULT: SIMPLE STYLING
![Page 51: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/51.jpg)
.container { width: 510px; margin: 0 auto; background: lightblue;}.box { float: left; background-color: tomato; margin: 20px 0; padding: 20px; color: white;}
![Page 52: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/52.jpg)
.container:after { content: ""; display: block; clear: both;}
![Page 53: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/53.jpg)
(container size) 510px / 6 (number of boxes) = 85px (box width)
Box Size Math
![Page 54: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/54.jpg)
.box { float: left; background-color: tomato; margin: 20px 0; padding: 20px; color: white; width: 85px;}
![Page 55: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/55.jpg)
((container size) 510px / 6 (number of boxes)) - 40px (padding)
= 45px (box width)
Box Size Math (gosh darnit)
![Page 56: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/56.jpg)
.box { float: left; background-color: tomato; margin: 20px 0; padding: 20px; color: white; width: 45px; or width: 85px; box-sizing: border-box;}
![Page 57: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/57.jpg)
This is why we use frameworks
![Page 58: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/58.jpg)
This is why Flex was created
![Page 59: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/59.jpg)
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div></div>
BACK THE TO START
![Page 60: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/60.jpg)
.container { display: flex;}
![Page 61: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/61.jpg)
.container { display: flex;}.box { flex: 1;}
![Page 62: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/62.jpg)
…
Box Size Math (done)
![Page 63: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/63.jpg)
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <!-- <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> --></div>
![Page 64: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/64.jpg)
<div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> <div class="box box7">7</div></div>
![Page 65: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/65.jpg)
Flex Layouts
![Page 66: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/66.jpg)
Flex-grow
![Page 67: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/67.jpg)
<div class="container">
<div class="box two-third"> Box 1 </div>
<div class="box one-third"> Box 2 </div> </div>
![Page 68: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/68.jpg)
.container { display: flex;}.two-third { flex: 2;}.one-third { flex: 1;}
![Page 69: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/69.jpg)
Width + Justify-Content
![Page 70: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/70.jpg)
.container { width: 80%; padding: 20px; display: flex; justify-content: space-between;}.two-third { width: 65%;}.one-third { width: 33%;}
![Page 71: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/71.jpg)
![Page 72: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/72.jpg)
.container { justify-content: space-between; // Extra whitespace between elements justify-content: space-around; // Extra whitespace split to either side of elements justify-content: space-evenly; // Extra whitespace split evenly around elements and row/column justify-content: center; // Content center with no whitespace justify-content: flex-start; // Extra whitespace at the end (default) justify-content: flex-end; // Extra whitespace at the start}
![Page 73: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/73.jpg)
![Page 74: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/74.jpg)
Height + Align-Items
![Page 75: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/75.jpg)
.container { width: 80%; height: 60vh; padding: 20px; display: flex;}.two-third { width: 65%;}.one-third { width: 33%;}
![Page 76: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/76.jpg)
.container { align-items: stretch; // Height stretches to match row *default align-items: flex-start; // Height by content - aligned top align-items: flex-end; // Height by content - aligned bottom align-items: center; // Height by content - center aligned align-items: baseline; // Height by content - aligned by baseline of first line of text}
![Page 77: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/77.jpg)
![Page 78: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/78.jpg)
Directional Flexing
![Page 79: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/79.jpg)
.container { flex-direction: row; // Default ... it's a row flex-direction: row-reverse; // Reverses the order of the row flex-direction: column; // It's a column with a simple change in CSS flex-direction: column-reverse; // Reverses the direction of the column; // Column also changes the direction justify and align deal with.}
![Page 80: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/80.jpg)
![Page 81: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/81.jpg)
![Page 82: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/82.jpg)
Simple Utility - Fluid Grid
![Page 83: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/83.jpg)
.container { display: flex; justify-content: space-between; padding: 10px; flex-wrap: wrap;}.box { height: 30vw;
width: calc(33% - 10px); margin-bottom: 15px;}
![Page 84: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/84.jpg)
• Flexbox by Animated GIF • Flexbox Froggy • CSS Tricks Complete Guide to Flexbox
Learn More
![Page 85: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/85.jpg)
New UnitsSIZING HAS NEVER BEEN MORE FUN!
![Page 86: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/86.jpg)
Size Relative to the viewport
![Page 87: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/87.jpg)
.container { display: flex; justify-content: space-between; width: 80%;}.box { width: 25vw; height: 25vh;}
![Page 88: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/88.jpg)
((current viewport size) 600px / 100 (percentage)) x 25vw
= 150px (box width)
Viewport Math
![Page 89: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/89.jpg)
How can I use this for fun and profit?
![Page 90: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/90.jpg)
Responsive Squares!
![Page 91: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/91.jpg)
.box { width: 20vw; height: 20vw;}
![Page 92: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/92.jpg)
Responsive Typography!
![Page 93: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/93.jpg)
h1 { font-size: default;}
h2 { font-size: 5vw;}
h3 { font-size: calc(16px + 1vw);}
p { font-size: calc(12px + .75vw); line-height: 1.4em;}
![Page 94: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/94.jpg)
calc(unit [+, -, ÷, x] unit)
![Page 95: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/95.jpg)
h3 { font-size: calc(16px + 1vw);}.box { width: calc(33% - 20px); margin: 0 10px;}
![Page 96: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/96.jpg)
Let’s put a few things together
![Page 97: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/97.jpg)
![Page 98: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/98.jpg)
Background Blend ModeCAN THE BROWSER REPLACE PHOTOSHOP?
![Page 99: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/99.jpg)
Support (FALL FORWARD WITH EYE TOWARD READABILITY)
![Page 100: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/100.jpg)
![Page 101: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/101.jpg)
.box { height: 15vw; margin-bottom: 50px; width: calc(25% - 10px);
background-size: cover; background-image: url(https://placekitten.com/1000/800); background-color: purple; background-blend-mode: [value];
}
![Page 102: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/102.jpg)
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
![Page 103: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/103.jpg)
![Page 104: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/104.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 105: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/105.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 106: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/106.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 107: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/107.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 108: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/108.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 109: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/109.jpg)
Multiply Screen OverlayNormal
Darken Color Dodge Hard LightLighten
Exclusion Color LuminosityDifference
![Page 110: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/110.jpg)
Grid LayoutTWO-DIMENSIONAL LAYOUT AT ITS FINEST. ALMOST HERE!
![Page 111: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/111.jpg)
Support (LEARN NOW. THANK ME LATER)
![Page 112: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/112.jpg)
Grid Terminology
Grid Line Grid Cell Grid Track Grid Area
SOURCE: COMPLETE GUIDE TO GRID CSS-TRICKS
![Page 113: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/113.jpg)
.container { width: 90%; background-color: lightblue; margin: 30px auto;}.box { background-color: tomato; padding: 10px 20px; box-sizing: border-box; margin-bottom: 10px;}
![Page 114: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/114.jpg)
grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr;
Grid Template Construction
![Page 115: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/115.jpg)
grid-template-columns: 100px 1fr 10vw 10%;
Grid Template Construction
![Page 116: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/116.jpg)
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw;}
![Page 117: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/117.jpg)
grid-column: span 2;grid-column: 1 / 4;grid-column: 2 / 3;grid-column: 1 span 2;
Grid Item Placement
![Page 118: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/118.jpg)
grid-row: span 2;grid-row: 1 / 4;grid-row: 2 / 3;grid-row: 1 span 2;
Grid Item Placement
![Page 119: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/119.jpg)
.container { grid-template-columns: 1fr 1fr 1fr 1fr;}.box:nth-child(2) { grid-column: span 2;}
![Page 120: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/120.jpg)
.box:nth-child(2) { grid-row: 2 / 3; grid-column: 2 / span 2;}
![Page 121: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/121.jpg)
.box:nth-child(2) { grid-row: 1 / 3; grid-column: 2 / span 2;}
or
.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}
![Page 122: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/122.jpg)
.container { grid-template-columns: 1fr 1fr 1fr 1fr;}.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}
![Page 123: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/123.jpg)
.box:nth-child(2) { grid-row: span 2; grid-column: span 2;}.box:nth-child(5) { grid-row: span 5; grid-column: span 2;}
![Page 124: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/124.jpg)
.container { ... grid-auto-flow: dense;}
![Page 125: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/125.jpg)
![Page 126: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/126.jpg)
![Page 127: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/127.jpg)
![Page 128: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/128.jpg)
display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;grid-gap: calc(.5rem + .5vw);
grid-template-areas: "main main main second third fourth" "main main main fifth fifth fifth" "promo promo promo promo promo promo" "sixth sixth seventh seventh eighth eighth" "sixth sixth seventh seventh ninth tenth”;
![Page 129: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/129.jpg)
&:nth-child(1) { grid-area: main;}&:nth-child(2) { grid-area: second;}&:nth-child(3) { grid-area: third;}&:nth-child(4) { grid-area: fourth;}&:nth-child(5) { grid-area: fifth;}
&:nth-child(6) { grid-area: sixth;}&:nth-child(7) { grid-area: seventh;}&:nth-child(8) { grid-area: eighth;}&:nth-child(9) { grid-area: ninth;}&:nth-child(10) { grid-area: tenth;}
![Page 130: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/130.jpg)
![Page 131: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/131.jpg)
.about { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(20vw, 1fr); grid-template-areas: " first . . second ." " . . third . ." " fourth . . . fifth" " . sixth sixth . fifth" " . sixth sixth . ." " . . . seventh seventh" "eighth eighth . seventh seventh" "eighth eighth . . .";}
![Page 132: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/132.jpg)
.banner { display: grid; grid-template-rows: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr); }.headline { font-size: calc(1.5rem + 6vw); grid-row: 4 / 5; grid-column: 2 / 6;}.subhead { grid-column: 2 / 6; grid-row: 5 / 6; font-size: calc(1rem + 2vw);}
![Page 133: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/133.jpg)
• Rachel Andrew's Get Ready for Grid Layout • My Simple Primer • CSS Tricks Complete Guide to Grid • Jen Simmons’ Lab
Learn More
![Page 134: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/134.jpg)
Explore More
![Page 135: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/135.jpg)
• Initial Letter
• CSS Transforms
• Object-Fit
• CSS Filters
• Clip Path
Explore More
![Page 136: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/136.jpg)
No Shame in TemplatesBUT UNDERSTAND WHAT THE TEMPLATE DOES AND HOW TO BREAK OUT
![Page 137: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/137.jpg)
CSS is PowerfulLEARN A FEW THINGS AND MAKE INTERESTING DESIGNS
![Page 138: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/138.jpg)
Start TodayYOU DON’T HAVE TO WAIT FOR 100% BROWSER ADOPTION
![Page 139: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/139.jpg)
HomeworkLEARN ONE NEW LAYOUT AND ONE NEW STYLE PROPERTY
![Page 140: Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties](https://reader030.vdocuments.net/reader030/viewer/2022032613/58cef97a1a28abab738b55ef/html5/thumbnails/140.jpg)
• http://bryanlrobinson.com
• Twitter: @brob
• Slack: http://slack.memphistechnology.org/
• Today’s Examples: postmoderncss.com
I’d love to help you