added whole content

content/CSS/Automatic Grid like Masonry with pure CSS.md

@@ -0,0 +1,45 @@
+Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows/columns.
+
+```scss
+$cell: 250px;
+$gap: 20px;
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));
+  grid-auto-rows: 256px;
+  grid-auto-flow: row dense;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+```
+
+### Basic elements with double height or width
+
+```scss
+.h-2 { // takes 2 columns
+	grid-column-end: span 2;
+}
+
+.v-2 { // takes 2 rows
+	grid-row-end: span 2;
+}
+```
+
+### Header, that fills all columns
+
+```scss
+.full-width {
+  grid-row: 1 / 2; // height: 1 row
+  grid-column: 1 / -1;
+}
+```
+
+### Stamp element, that takes 3 rows in the top right corner
+
+```scss
+.top-right {
+  grid-row: 1 / 3; // height here
+  grid-column: -2 / -1; // width here
+}
+```

content/CSS/Sass nth-child iterate mixin.md

@@ -0,0 +1,19 @@
+Say, we need to color `n` items by specific colors, which depend on its position. #SCSS supports [iteration over lists](https://sass-lang.com/documentation/at-rules/control/each) for that purposes:
+
+```scss
+@mixin color-per-child($colors) {
+  @each $color in $colors {
+    &:nth-child(#{index(($colors), ($color))}) {
+      color: $color;
+    }
+  }
+}
+```
+
+Usage is simple:
+
+```scss
+.item {
+  @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));
+}
+```

content/CSS/Test if browser supports CSS rules.md

@@ -0,0 +1,20 @@
+To test if browser supports some #CSS rules, do following:
+
+```css
+@supports (backdrop-filter: blur(5px)) {
+	backdrop-filter: blur(5px);
+}
+```
+
+This `@mixin` will only apply rule if browser support backdrop filtering:
+
+```scss
+@mixin can_backdrop {
+  @supports (
+    (-webkit-backdrop-filter: blur(5px)) or 
+    (backdrop-filter: blur(5px))
+  ) {
+    @content;
+  }
+}
+```