andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:34:04 +03:00
parent d35dab24c3
commit 3077d4c71f
27 changed files with 141 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
snippets/masonry-layout.md
View File

@@ -65,14 +65,8 @@ Creates a vertical masonry layout using HTML and CSS.
#### Explanation
- Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images.
- `.masonry-container` is the container for the masonry layout. Within that container, there's a `div.masonry-columns`, which will automatically put each child element, `.masonry-brick`, into the layout.
- `.masonry-container` is the container for the masonry layout. Within that container, there's a `div.masonry-columns`, which will automatically put each child element, `.masonry-brick`, into the layout.
- `.masonry-brick` must be have `display: block` to allow the layout to flow properly, while the `:first-child` of this class should have a different `margin` to account for its positioning.
- CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes.
#### Browser support
- https://www.caniuse.com/#feat=css-variables
- https://www.caniuse.com/#feat=calc
- https://www.caniuse.com/#feat=mdn-css_properties_column-count
- https://www.caniuse.com/#feat=mdn-css_properties_column-width
- https://www.caniuse.com/#feat=mdn-css_properties_column-gap_multicol_context