From 25eb5f0e5701900a6760966ec65c0971442ae473 Mon Sep 17 00:00:00 2001
From: ellipticcurv3 <14904229+ellipticcurv3@users.noreply.github.com>
Date: Wed, 11 Dec 2019 10:43:48 +0100
Subject: [PATCH] Removed vendor prefixes

---
 snippets/masonry-layout.md | 31 +++----------------------------
 1 file changed, 3 insertions(+), 28 deletions(-)

diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md
index 064f9160e..f92e906eb 100644
--- a/snippets/masonry-layout.md
+++ b/snippets/masonry-layout.md
@@ -19,6 +19,8 @@ This snippet creates a vertical Masonry layout using pure HTML and CSS.
 ```
 
 ```css
+/* Container */
+
 .masonry-container {
   --column-count-small: 1;
   --column-count-medium: 2;
@@ -32,54 +34,26 @@ This snippet creates a vertical Masonry layout using pure HTML and CSS.
 
 .masonry-container .masonry-columns {
   column-gap: var(--column-gap);
-  -webkit-column-gap: var(--column-gap);
-  -moz-column-gap: var(--column-gap);
-  -ms-column-gap: var(--column-gap);
-  -o-column-gap: var(--column-gap);
 }
 
 @media only screen and (min-width: 800px) {
   .masonry-container .masonry-columns {
     column-count: var(--column-count-large);
-    -webkit-column-count: var(--column-count-large);
-    -moz-column-count: var(--column-count-large);
-    -ms-column-count: var(--column-count-large);
-    -o-column-count: var(--column-count-large);
     column-width: calc(1 / var(--column-count-large) * 100%);
-    -webkit-column-width: calc(1 / var(--column-count-large) * 100%);
-    -moz-column-width: calc(1 / var(--column-count-large) * 100%);
-    -ms-column-width: calc(1 / var(--column-count-large) * 100%);
-    -o-column-width: calc(1 / var(--column-count-large) * 100%);
   }
 }
 
 @media only screen and (min-width: 640px) and (max-width: 799px) {
   .masonry-container .masonry-columns {
     column-count: var(--column-count-medium);
-    -webkit-column-count: var(--column-count-medium);
-    -moz-column-count: var(--column-count-medium);
-    -ms-column-count: var(--column-count-medium);
-    -o-column-count: var(--column-count-medium);
     column-width: calc(1 / var(--column-count-medium) * 100%);
-    -webkit-column-width: calc(1 / var(--column-count-medium) * 100%);
-    -moz-column-width: calc(1 / var(--column-count-medium) * 100%);
-    -ms-column-width: calc(1 / var(--column-count-medium) * 100%);
-    -o-column-width: calc(1 / var(--column-count-medium) * 100%);
   }
 }
 
 @media only screen and (max-width: 639px) {
   .masonry-container .masonry-columns {
     column-count: var(--column-count-small);
-    -webkit-column-count: var(--column-count-small);
-    -moz-column-count: var(--column-count-small);
-    -ms-column-count: var(--column-count-small);
-    -o-column-count: var(--column-count-small);
     column-width: calc(1 / var(--column-count-small) * 100%);
-    -webkit-column-width: calc(1 / var(--column-count-small) * 100%);
-    -moz-column-width: calc(1 / var(--column-count-small) * 100%);
-    -ms-column-width: calc(1 / var(--column-count-small) * 100%);
-    -o-column-width: calc(1 / var(--column-count-small) * 100%);
   }
 }
 
@@ -103,6 +77,7 @@ This snippet creates a vertical Masonry layout using pure HTML and CSS.
 - Masonry is not the same as a CSS grid or Flexbox &mdash; they usually have both fixed width and height, a Masonry-layout has one variable dimension (width or height), and forms a perfect fit.
 - `.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 a Masonry layout. There's some CSS that ensures that `.masonry-brick` is a block-level element and that the first one will have no margin on top.
 - You can change the CSS3 variables to fine-tune it.
+- Older browsers might need vendor prefixes.
 - An interactive example with more images: https://jsfiddle.net/ellipticcurv3/q8Ljcfam/
 
 #### Browser support