Added CSS Grid

AllThingsSmitty · Jun 28, 2018 · 26d1859 · 26d1859
1 parent 61d6616
commit 26d1859
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -74,7 +74,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -166,10 +168,11 @@ This way textual elements can inherit from `body` easily.
 
 ### Vertically-Center Anything
 
-No, it's not black magic, you really can center elements vertically:
+No, it's not black magic, you really can center elements vertically. You can do this with flexbox...
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }
@@ -183,6 +186,18 @@ body {
 }
 ```
 
+...and also with CSS Grid:
+
+```css
+body {
+  display: grid;
+  height: 100vh;
+  margin: 0;
+  place-items: center center;
+}
+```
+
+
 Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.
 
 **Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11.

diff --git a/translations/es-ES/README.md b/translations/es-ES/README.md
@@ -73,7 +73,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -168,7 +170,8 @@ De esta manera los elementos de texto pueden heredarlo fácilmente de `body`.
 No, no es magia negra, realmente puedes centrar elementos verticalmente:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/fr-FR/README.md b/translations/fr-FR/README.md
@@ -73,7 +73,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
@@ -169,7 +171,8 @@ De cette façon, les éléments textuels peuvent hériter de `body` facilement.
 Non, ce n'est pas de la magie noire, vous ne pouvez vraiment centrer des éléments verticalement:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/gu-IND/README.md b/translations/gu-IND/README.md
@@ -73,7 +73,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -168,7 +170,8 @@ body {
 ના, તે કાળા જાદુ નથી, તમે ખરેખર ઊભી તત્વોને કેન્દ્રિત કરી શકો છો:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/it-IT/README.md b/translations/it-IT/README.md
@@ -77,7 +77,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -180,7 +182,8 @@ In questo modo gli elementi di testo possono ereditare facilmente da `body`.
 No, non è magia nera. Puoi veramente centrare gli elementi verticalmente:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/ja-JP/README.md b/translations/ja-JP/README.md
@@ -83,7 +83,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
@@ -185,7 +187,8 @@ body {
 なんでも天地の中央に配置できます！！
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/ko-KR/readme.md b/translations/ko-KR/readme.md
@@ -82,7 +82,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -185,7 +187,8 @@ body {
 농담이 아니라, 진짜 전부 중앙으로 배치가 가능합니다.
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/pl-PL/README.md b/translations/pl-PL/README.md
@@ -73,7 +73,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -169,7 +171,8 @@ W ten sposób elementy tekstowe mogą łatwo korzystać z
 Nie, to nie jest czarna magia, naprawdę możesz wyśrodkować elementy w pionie:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/pt-BR/README.md b/translations/pt-BR/README.md
@@ -73,7 +73,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -168,7 +170,8 @@ Dessa maneira elementos de texto vão herdar o `line-height` do `body`.
 Que bruxaria é essa? Não é bruxaria! Você realmente pode centralizar elementos verticalmente:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/pt-PT/README.md b/translations/pt-PT/README.md
@@ -72,7 +72,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -139,7 +141,8 @@ Desta forma elementos de texto vão herdar o `line-height` do `body`.
 Que bruxaria é essa? Não é bruxaria!Tu realmente podes centralizar elementos verticalmente:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/ru-RU/README.md b/translations/ru-RU/README.md
@@ -75,7 +75,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -170,7 +172,8 @@ body {
 Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали:
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }

diff --git a/translations/zh-CN/README.md b/translations/zh-CN/README.md
@@ -74,7 +74,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
@@ -169,7 +171,8 @@ body {
 不！这绝不是黑魔法，真的可以垂直居中任何元素：
 
 ```css
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
 }