|
|
@@ -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.
|
