Permalink
Browse files

Added CSS Grid

  • Loading branch information...
AllThingsSmitty committed Jun 28, 2018
1 parent 61d6616 commit 26d18592f2000bfe71512442aa14d757ce5f77b5
View
@@ -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.
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}
@@ -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;
}

0 comments on commit 26d1859

Please sign in to comment.