Browse Source

finished chapter 17

tomi 6 years ago
parent
commit
9425d2aaa7
1 changed files with 11 additions and 0 deletions
  1. 11 0
      CSS-Grid/course.md

+ 11 - 0
CSS-Grid/course.md

@@ -107,3 +107,14 @@
 * With `grid-auto-flow: dense;` this space is filled with subsequent items.
 
 # 17 - CSS Grid Alignment and Centering
+* In CSS grid:
+    * `align-*` is in column axis
+    * `justify-*` is in row axis
+* 3 different targets:
+    * `align-items`
+    * `align-content`
+    * `align-self`
+* CSS shorthand: `place-items: center start;` = `align-items: center; justify-items: start;`
+* `*-items` is used on the grid container and affects the grid items. Values are `stretch` (default), `center`, `start`, `end`
+* `*-content` is also used on the grid container and affects the grid content if the items don't fill all the space (e.g. with fixed widths). Values are `start` (default), `center`, `end`, `space-between` (very useful), `space-between`, `space-evenly`
+* `*-self` is used on the grid items. It overrides the container setting on an item to item basis.