|
|
@@ -44,4 +44,55 @@
|
|
|
# 10 - Placing Grid Items
|
|
|
* You can explicitely define the start and end tracks of an item with `grid-column-start: 2` and `grid-column-end: 5` or shorthand `grid-column: 2 / 5` or `grid-column: 2 / span 3`
|
|
|
* Negative numbers are also possible:
|
|
|
- * `grid-column: 2 / 5` = `grid-column: 2 / -2` for a 5 column layout.
|
|
|
+ * `grid-column: 2 / 5` = `grid-column: 2 / -2` for a 5 column layout.
|
|
|
+
|
|
|
+# 12 - auto-fit and auto-fill
|
|
|
+* In the repeat function of `grid-template-column` or `grid-template-row` you can use `auto-fit` or `auto-fill` as first argument.
|
|
|
+* `auto-fill` will create as many columns/rows as possible, making it possible to move items at the end of the screen
|
|
|
+* `auto-fit` will create as many columns/rows as possible but without making the grid physically wider
|
|
|
+ * So the main difference is for few items and when using `grid-column-end` for an item.
|
|
|
+
|
|
|
+# 13 - Using minmax() for Responsive Grids
|
|
|
+* In the repeat function of `grid-template-column` or `grid-template-row` you can use the `minmax` function as second argument.
|
|
|
+* It allows to give a minimum and maximum value for an item width/height.
|
|
|
+* In combination with `fr` for the max width and `auto-fit` in the repeat function, this can help to create responsive designs.
|
|
|
+* Another solution is to use `grid-template-column: fit-content(100px) 150px 150px` which for the first column will fit the content into the box, but set an upper limit to 100px for the width.
|
|
|
+
|
|
|
+# 14 - Grid Template Areas
|
|
|
+* Layout the grid as follows
|
|
|
+```
|
|
|
+.content {
|
|
|
+ gird-template-columns: (add your values)
|
|
|
+ grid-template-area:
|
|
|
+ "sidebar-1 header sidebar-2"
|
|
|
+ "sidebar-1 content sidebar-2"
|
|
|
+ "footer footer footer";
|
|
|
+}
|
|
|
+.item1 {
|
|
|
+ grid-area: sidebar-1;
|
|
|
+}
|
|
|
+.item2 {
|
|
|
+ grid-area: header;
|
|
|
+}
|
|
|
+.item3 {
|
|
|
+ grid-area: sidebar-2;
|
|
|
+}
|
|
|
+.item4 {
|
|
|
+ grid-area: content;
|
|
|
+}
|
|
|
+.item5 {
|
|
|
+ grid-area: footer;
|
|
|
+}
|
|
|
+```
|
|
|
+* Now you can use media queries and redefine the grid area:
|
|
|
+```
|
|
|
+@media (max-width: 500px) {
|
|
|
+ .container {
|
|
|
+ grid-template-areas:
|
|
|
+ "content content content"
|
|
|
+ "sidebar-1 sidebar-1 sidebar-2"
|
|
|
+ "footer footer footer";
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+* When you have areas, you get line names for free, so `footer-start` and `footer-end` is automatically available for things like `grid-column: footer-start / footer-end;`
|
