Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
You can use CSS for that!
@rachelandrew | GOTO Berlin
@rachelandrew



https://rachelandrew.co.uk
Co-founder Perch CMS / CSS WG Invited
Expert / Google Developer Expert /
Autho...
Box Alignment level 3
Lining things up with
This is the vertical-
centering module.
.box {
display: flex;
align-items: center;
justify-content: center;
}
<div class="box">
<img alt="balloon" src="square-
ba...
http://codepen.io/rachelandrew/pen/XKaZWm
http://codepen.io/rachelandrew/pen/RavbmN
.wrapper {
display: flex;
}
.wrapper li {
min-width: 1%;
flex: 1 0 25%;
}
.wrapper li:nth-child(2) {
align-self: center;
}...
Box Alignment defines how
these properties work in
other layout methods.
The box alignment properties in CSS are a set of 6 properties
that control alignment of boxes within other boxes.
CSS BOX ...
CSS BOX ALIGNMENT LEVEL 3
▸ justify-content
▸ align-content
▸ justify-self
▸ align-self
▸ justify-items
▸ align-items
CSS Grid Layout
A proper layout system with
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.wrapper li {
min-width: 1%;
}
.wrapper li:nth-child(2)...
http://codepen.io/rachelandrew/pen/jqdNoL
“Unlike Flexbox, however, which is single-axis–oriented, Grid
Layout is optimized for 2-dimensional layouts: those in whic...
.cards {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
CSS Grid Layout
Defining a 3 column grid
http://codepen.io/rachelandrew/pen/qqdGOa
.cards {
display:flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 250px;
margin: 5px;
}
Flexbox
Flexbox can wrap flex items onto
...
http://codepen.io/rachelandrew/pen/VjzrgG
.cards {
display:grid;
grid-template-columns:
repeat(auto-fill, minmax(200px,1fr));
grid-gap: 10px;
}
CSS Grid Layout
Crea...
minmax()
http://codepen.io/rachelandrew/pen/QKwvxJ
.home-hero {
display: grid;
grid-gap: 1px;
grid-auto-rows: minmax(150px,
auto);
}
minmax()
Rows should be a minimum of 150...
CSS Grid auto-placement
<ul class="colors">
<li style="background-
color:#FFFFFF;color:black"
class="white">FFF FFF
</li>
<li style="background-
c...
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax...
http://codepen.io/rachelandrew/pen/LRWPNp/
.white {
grid-column: 1 / -1;
grid-row: 3;
}
.black {
grid-column: 1 / -1;
grid-row: 6;
}
.span2 {
grid-column-end: span 2...
.colors {
display: grid;
grid-template-columns:
repeat(auto-fill,minmax(80px, 1fr));
grid-gap: 2px;
grid-auto-rows: minmax...
http://gridbyexample.com/browsers/
display: contents
Vanishing boxes with
The element itself does not generate any boxes, but its children
and pseudo-elements still generate boxes as normal. For t...
allow indirect children to
become flex or grid items
<div class="wrapper">
<h1></h1>
<p></p>
<blockquote class="inset"></blockquote>
<p></p>
<ul class="images">
<li></li>
<li>...
.wrapper {
max-width: 700px;
margin: 40px auto;
display: grid;
grid-column-gap: 30px;
grid-template-columns:1fr 1fr;
}
.wr...
http://codepen.io/rachelandrew/pen/gLborW
.images {
display: contents;
}
display: contents
The ul has a class of images. By
applying display: contents the ul is
rem...
http://codepen.io/rachelandrew/pen/gLborW
https://www.chromestatus.com/feature/5663606012116992
CSS Shapes
Getting curvy with
CSS Shapes describe geometric shapes for use in CSS. For Level
1, CSS Shapes can be applied to floats. A circle shape on a ...
.balloon {
float: left;
width: 429px;
shape-outside: circle(50%);
}
<div class="box">
<img class="balloon" src="round-
bal...
http://codepen.io/rachelandrew/pen/KrvyQq
.box::before {
content: "";
display: block;
float: left;
width: 429px;
height: 409px;
shape-outside: circle(50%);
}
CSS Sh...
http://codepen.io/rachelandrew/pen/mErqxy
.balloon {
float: right;
width: 640px;
height: 427px;
shape-outside: ellipse(33% 50% at
460px);
-webkit-clip-path: ellipse...
http://codepen.io/rachelandrew/pen/vKJmXR
http://caniuse.com/#feat=css-shapes
Feature Queries
Can I Use this with
The ‘@supports’ rule is a conditional group rule whose
condition tests whether the user agent supports CSS
property:value ...
http://caniuse.com/#feat=css-featurequeries
Anything new in CSS you
can use feature queries to
detect support.
@supports (display: grid) {
.has-grid {
/* CSS for grid browsers here */
}
}
Feature Queries
Checking for support of Grid ...
@supports ((display: grid) and (shape-
outside: circle())) {
.has-grid-shapes {
/* CSS for these excellent browsers
here *...
Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ Se...
.balloon {
border: 1px solid #999;
padding: 2px;
}
@supports ((shape-outside: ellipse()) and
((clip-path: ellipse()) or (-...
http://codepen.io/rachelandrew/pen/vKJmXR
http://codepen.io/rachelandrew/pen/vKJmXR
Websites that enhance
themselves as the platform
improves.
Initial Letter
Fancy introductions with
Large, decorative letters have been used to start new sections
of text since before the invention of printing. In fact, th...
h1+p::first-letter {
initial-letter: 4 3;
}
Initial Letter
Make the initial letter four lines tall,
one line above the con...
http://codepen.io/rachelandrew/full/WobvQq/
http://codepen.io/rachelandrew/full/WobvQq/
Currently Safari 9+ only.
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ;
background-color: rgb(114,110,151);
padding: 2em .5em;
margin:...
http://codepen.io/rachelandrew/pen/LbEpPX
@supports (initial-letter: 3) or (-
webkit-initial-letter: 3) {
h1+p::first-letter {
font-weight: bold;
initial-letter: 7 ...
http://codepen.io/rachelandrew/pen/LbEpPX
Writing modes
Upside down and back to front with
http://codepen.io/rachelandrew/pen/LbVQNW
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 40px;
}
h1 {
writing-mode: vertical-rl;
transform: ro...
http://codepen.io/rachelandrew/pen/LbVQNW
http://caniuse.com/#feat=css-writing-mode
Custom properties
Variables in CSS with
This module introduces a family of custom author-defined
properties known collectively as custom properties, which allow
an...
:root {
--primary: blue;
--secondary: orange;
}
h1 {
color: var(--primary);
}
Custom Properties
Define variables then use t...
:root {
--primary: blue;
--secondary: orange;
}
@supports (--primary: blue) {
h1 {
color: var(--primary);
}
h2 {
color: va...
http://codepen.io/rachelandrew/pen/mErpZA
http://caniuse.com/#feat=css-variables
calc()
Adding things up with
Basic mathematics in CSS
<div class="wrapper">
<div class="box box1">
<p>…</p>
<div>height is defined by the flex
container.</div>
</div>
<div clas...
.box2 {
height: 140px;
}
.box3 {
height: 14em;
transition: height 0.5s ease;
}
.box3:hover {
height: 30em;
}
calc()
Two of...
.box > div {
color: #fff;
border-radius: 5px;
position: absolute;
bottom: 20px;
right: 20px;
width: 30%;
height: calc(50% ...
http://codepen.io/rachelandrew/full/VmYYqM/
http://caniuse.com/#feat=calc
position: sticky
Staying put with
A stickily positioned box is positioned similarly to a relatively
positioned box, but the offset is computed with reference...
<dl class="authors">
<dt>A</dt>
<dd>John Allsopp</dd>
<dd>Rachel Andrew</dd>
<dt>B</dt>
<dd>. . .</dd>
</dl>
position: sti...
.authors dt {
position: sticky;
top: 0;
}
position: sticky
Applying position: sticky to the dt
http://codepen.io/rachelandrew/pen/NbPamG
http://caniuse.com/#feat=css-sticky
Scroll snapping
Snap to it with
https://drafts.csswg.org/css-scroll-snap-1/
http://caniuse.com/#feat=css-snappoints
.gallery {
scroll-snap-type: mandatory;
scroll-snap-destination: 0 100% ;
scroll-snap-points-x: repeat(100%);
}
Scroll Sna...
http://codepen.io/rachelandrew/pen/NbPGYg
.gallery {
scroll-snap-type: mandatory;
scroll-snap-destination: 0 100% ;
scroll-snap-points-y: repeat(100%);
}
Scroll Sna...
http://codepen.io/rachelandrew/pen/xRbXqr
Getting our hands on all
the new shiny
Tell browser vendors you
want these features
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
Please comment on
emerging specifications
https://github.com/w3c/csswg-drafts/issues
Thank you
https://cssgrid.me/gotober
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Upcoming SlideShare
Loading in …5
×

GOTO Berlin - You can use CSS for that

861 views

Published on

A roundup of new things coming into the CSS specs and into browsers, with details of how to start using these things sooner rather than later.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GOTO Berlin - You can use CSS for that

  1. 1. You can use CSS for that! @rachelandrew | GOTO Berlin
  2. 2. @rachelandrew
 
 https://rachelandrew.co.uk Co-founder Perch CMS / CSS WG Invited Expert / Google Developer Expert / Author / Speaker / Web Developer.
  3. 3. Box Alignment level 3 Lining things up with
  4. 4. This is the vertical- centering module.
  5. 5. .box { display: flex; align-items: center; justify-content: center; } <div class="box"> <img alt="balloon" src="square- balloon.jpg"> </div> Flexbox Centre the content of .box.
  6. 6. http://codepen.io/rachelandrew/pen/XKaZWm
  7. 7. http://codepen.io/rachelandrew/pen/RavbmN
  8. 8. .wrapper { display: flex; } .wrapper li { min-width: 1%; flex: 1 0 25%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; } Flexbox Aligning items within the flex container
  9. 9. Box Alignment defines how these properties work in other layout methods.
  10. 10. The box alignment properties in CSS are a set of 6 properties that control alignment of boxes within other boxes. CSS BOX ALIGNMENT LEVEL 3 https://drafts.csswg.org/css-align/
  11. 11. CSS BOX ALIGNMENT LEVEL 3 ▸ justify-content ▸ align-content ▸ justify-self ▸ align-self ▸ justify-items ▸ align-items
  12. 12. CSS Grid Layout A proper layout system with
  13. 13. .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); } .wrapper li { min-width: 1%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; } CSS Grid Layout Aligning grid items with the Box Alignment properties.
  14. 14. http://codepen.io/rachelandrew/pen/jqdNoL
  15. 15. “Unlike Flexbox, however, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.” CSS GRID LAYOUT https://drafts.csswg.org/css-grid/
  16. 16. .cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } CSS Grid Layout Defining a 3 column grid
  17. 17. http://codepen.io/rachelandrew/pen/qqdGOa
  18. 18. .cards { display:flex; flex-wrap: wrap; } .card { flex: 1 1 250px; margin: 5px; } Flexbox Flexbox can wrap flex items onto multiple rows. A new row becomes a new flex container for the purposes of distributing space.
  19. 19. http://codepen.io/rachelandrew/pen/VjzrgG
  20. 20. .cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; } CSS Grid Layout Create as many columns as will fit into the container with a minimum width of 200px, and a maximum of 1fr.
  21. 21. minmax()
  22. 22. http://codepen.io/rachelandrew/pen/QKwvxJ
  23. 23. .home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); } minmax() Rows should be a minimum of 150px and a maximum of auto
  24. 24. CSS Grid auto-placement
  25. 25. <ul class="colors"> <li style="background- color:#FFFFFF;color:black" class="white">FFF FFF </li> <li style="background- color:#CCCCCC;color:black">CCC CCC </li> <li style="background- color:#999999;color:black" class="span3">999 999 </li> </ul> Grid auto-placement I have a list with all ye olde web safe colours in it.
  26. 26. .colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); } Grid auto-placement I auto-fill columns and rows with minmax()
  27. 27. http://codepen.io/rachelandrew/pen/LRWPNp/
  28. 28. .white { grid-column: 1 / -1; grid-row: 3; } .black { grid-column: 1 / -1; grid-row: 6; } .span2 { grid-column-end: span 2; grid-row-end: span 2; } .span3 { grid-column-end: span 3; grid-row-end: span 3; } .tall4 { grid-row-end: span 4; } Grid auto-placement Adding classes to some elements, by setting the value of grid-column-end and grid-row-end to span.
  29. 29. .colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); grid-auto-flow: dense; } Grid auto-placement grid-auto-flow with a value of dense
  30. 30. http://gridbyexample.com/browsers/
  31. 31. display: contents Vanishing boxes with
  32. 32. The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo- elements in the document tree. DISPLAY: CONTENTS https://drafts.csswg.org/css-display/#box-generation
  33. 33. allow indirect children to become flex or grid items
  34. 34. <div class="wrapper"> <h1></h1> <p></p> <blockquote class="inset"></blockquote> <p></p> <ul class="images"> <li></li> <li></li> </ul> <p></p> </div> display: contents All elements are direct children of ‘wrapper’ except for the li elements.
  35. 35. .wrapper { max-width: 700px; margin: 40px auto; display: grid; grid-column-gap: 30px; grid-template-columns:1fr 1fr; } .wrapper h1, .wrapper p { grid-column: 1 / -1; } .inset { grid-column: 1 ; font: 1.4em/1.3 'Lora', serif; padding: 0; margin: 0; } .inset + p { grid-column: 2; } display: contents A two column grid. The h1, p and blockquote with a class of inset are all direct children.
  36. 36. http://codepen.io/rachelandrew/pen/gLborW
  37. 37. .images { display: contents; } display: contents The ul has a class of images. By applying display: contents the ul is removed and the li elements become direct children.
  38. 38. http://codepen.io/rachelandrew/pen/gLborW
  39. 39. https://www.chromestatus.com/feature/5663606012116992
  40. 40. CSS Shapes Getting curvy with
  41. 41. CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box. CSS SHAPES https://drafts.csswg.org/css-shapes/
  42. 42. .balloon { float: left; width: 429px; shape-outside: circle(50%); } <div class="box"> <img class="balloon" src="round- balloon.png" alt="balloon"> <p>...</p> </div> CSS Shapes A simple shape using the 
 shape-outside property
  43. 43. http://codepen.io/rachelandrew/pen/KrvyQq
  44. 44. .box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%); } CSS Shapes Floating generated content to create a shape
  45. 45. http://codepen.io/rachelandrew/pen/mErqxy
  46. 46. .balloon { float: right; width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); } CSS Shapes Using clip-path to cut away part of an image
  47. 47. http://codepen.io/rachelandrew/pen/vKJmXR
  48. 48. http://caniuse.com/#feat=css-shapes
  49. 49. Feature Queries Can I Use this with
  50. 50. The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. FEATURE QUERIES https://www.w3.org/TR/css3-conditional/#at-supports
  51. 51. http://caniuse.com/#feat=css-featurequeries
  52. 52. Anything new in CSS you can use feature queries to detect support.
  53. 53. @supports (display: grid) { .has-grid { /* CSS for grid browsers here */ } } Feature Queries Checking for support of Grid Layout
  54. 54. @supports ((display: grid) and (shape- outside: circle())) { .has-grid-shapes { /* CSS for these excellent browsers here */ } } Feature Queries Test for more than one thing
  55. 55. Using Feature Queries ▸ Write CSS for browsers without support ▸ Override those properties inside the feature queries ▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
  56. 56. .balloon { border: 1px solid #999; padding: 2px; } @supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip- path:ellipse()))) { .balloon { border: none; padding: 0; float: right; width: 640px; min-width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); } } Feature Queries Write CSS for browsers without support, override that and add new CSS inside the feature query.
  57. 57. http://codepen.io/rachelandrew/pen/vKJmXR
  58. 58. http://codepen.io/rachelandrew/pen/vKJmXR
  59. 59. Websites that enhance themselves as the platform improves.
  60. 60. Initial Letter Fancy introductions with
  61. 61. Large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely. This [initial-letter] property specifies styling for dropped, raised, and sunken initial letters. INITIAL LETTER https://drafts.csswg.org/css-inline/#initial-letter-styling
  62. 62. h1+p::first-letter { initial-letter: 4 3; } Initial Letter Make the initial letter four lines tall, one line above the content and 3 into the content.
  63. 63. http://codepen.io/rachelandrew/full/WobvQq/
  64. 64. http://codepen.io/rachelandrew/full/WobvQq/
  65. 65. Currently Safari 9+ only.
  66. 66. h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } Initial Letter Adding additional styling to the initial letter.
  67. 67. http://codepen.io/rachelandrew/pen/LbEpPX
  68. 68. @supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } } Initial Letter Using feature queries to test for support before adding rules that style the first letter.
  69. 69. http://codepen.io/rachelandrew/pen/LbEpPX
  70. 70. Writing modes Upside down and back to front with
  71. 71. http://codepen.io/rachelandrew/pen/LbVQNW
  72. 72. .wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; } Writing Modes Using vertical-rl then flipping the text with a transform.
  73. 73. http://codepen.io/rachelandrew/pen/LbVQNW
  74. 74. http://caniuse.com/#feat=css-writing-mode
  75. 75. Custom properties Variables in CSS with
  76. 76. This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document. CSS CUSTOM PROPERTIES (CSS VARIABLES) https://drafts.csswg.org/css-variables/
  77. 77. :root { --primary: blue; --secondary: orange; } h1 { color: var(--primary); } Custom Properties Define variables then use them in CSS
  78. 78. :root { --primary: blue; --secondary: orange; } @supports (--primary: blue) { h1 { color: var(--primary); } h2 { color: var(--secondary); } } Custom Properties Can be tested for using feature queries
  79. 79. http://codepen.io/rachelandrew/pen/mErpZA
  80. 80. http://caniuse.com/#feat=css-variables
  81. 81. calc() Adding things up with
  82. 82. Basic mathematics in CSS
  83. 83. <div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> <div class="box box2"> <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div> calc() Three boxes, each with a div nested inside.
  84. 84. .box2 { height: 140px; } .box3 { height: 14em; transition: height 0.5s ease; } .box3:hover { height: 30em; } calc() Two of the outer boxes have a height, box1 is the height of the content inside. Box3 will grow on hover.
  85. 85. .box > div { color: #fff; border-radius: 5px; position: absolute; bottom: 20px; right: 20px; width: 30%; height: calc(50% - 20px); } calc() In the CSS for the inner box, we calculate the height as 50% - 20px.
  86. 86. http://codepen.io/rachelandrew/full/VmYYqM/
  87. 87. http://caniuse.com/#feat=calc
  88. 88. position: sticky Staying put with
  89. 89. A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. POSITION: STICKY https://drafts.csswg.org/css-position/#sticky-pos
  90. 90. <dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> <dd>Rachel Andrew</dd> <dt>B</dt> <dd>. . .</dd> </dl> position: sticky A dl with dt elements followed by multiple dd elements.
  91. 91. .authors dt { position: sticky; top: 0; } position: sticky Applying position: sticky to the dt
  92. 92. http://codepen.io/rachelandrew/pen/NbPamG
  93. 93. http://caniuse.com/#feat=css-sticky
  94. 94. Scroll snapping Snap to it with
  95. 95. https://drafts.csswg.org/css-scroll-snap-1/
  96. 96. http://caniuse.com/#feat=css-snappoints
  97. 97. .gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-x: repeat(100%); } Scroll Snapping Current Firefox implementation - spec has since changed!
  98. 98. http://codepen.io/rachelandrew/pen/NbPGYg
  99. 99. .gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-y: repeat(100%); } Scroll Snapping Current Firefox implementation - spec has since changed!
  100. 100. http://codepen.io/rachelandrew/pen/xRbXqr
  101. 101. Getting our hands on all the new shiny
  102. 102. Tell browser vendors you want these features
  103. 103. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
  104. 104. Please comment on emerging specifications
  105. 105. https://github.com/w3c/csswg-drafts/issues
  106. 106. Thank you https://cssgrid.me/gotober

×