Skip to content

Instantly share code, notes, and snippets.

@tdmrhn

tdmrhn/blocksy-2-masonry-grid.css

Created February 15, 2024 12:22
Show Gist options
  • Save tdmrhn/7b129b37c2680a595468722a59d92949 to your computer and use it in GitHub Desktop.
Save tdmrhn/7b129b37c2680a595468722a59d92949 to your computer and use it in GitHub Desktop.
Download ZIP
Blocksy 2 Blog Posts Masonry Grid
Raw
blocksy-2-masonry-grid.css
[data-prefix="blog"] section .entries {
display: block;
--masonry-column: 3;
-webkit-column-count: var(--masonry-column);
-moz-column-count: var(--masonry-column);
column-count: var(--masonry-column);
}
[data-prefix="blog"] section .entries article {
display: inline-block;
margin-bottom: var(--grid-columns-gap);
}
@media only screen and (max-width: 1000px) {
[data-prefix="blog"] section .entries {
--masonry-column: 3;
}
}
@media only screen and (max-width: 700px) {
[data-prefix="blog"] section .entries {
--masonry-column: 2;
}
}
@media only screen and (max-width: 480px) {
[data-prefix="blog"] section .entries {
--masonry-column: 1;
}
}
@tdmrhn
Copy link
Author

tdmrhn commented May 27, 2025

Woo Shop loop;

[data-prefix="woo_categories"] section .products {
  display: block;
  --masonry-column: 3;
  -webkit-column-count: var(--masonry-column);
  -moz-column-count: var(--masonry-column);
  column-count: var(--masonry-column);
}

[data-prefix="woo_categories"] section .products .product {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--grid-columns-gap);
}

@media only screen and (max-width: 1000px) {
  [data-prefix="woo_categories"] section .products {
    --masonry-column: 3;
  }
}

@media only screen and (max-width: 700px) {
  [data-prefix="woo_categories"] section .products {
    --masonry-column: 2;
  }
}

@media only screen and (max-width: 480px) {
  [data-prefix="woo_categories"] section .products {
    --masonry-column: 1;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment