itsanooray (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
itsanooray) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
betterdolphin2023-06-20 02:49 pm
itsanooray) wrote in betterdolphin2023-06-20 02:49 pm
Entry tags:
Simple flushed masonry layout for visuals
Below the cut is code for a simple flushed masonry layout for images. Unfortunately, I haven't found a way to make something similar that will break down to one column when screens sizes get small yet, but this code will shrink images down so it doesn't scroll horizontally on smaller screens. You're able to easily change how many columns you want.
How to use:
1) Copy and paste the code below.
2) Replace URLs in <img src=""> with your own. Copy and paste <img> lines to add more images. Be sure to keep the styles.
3) To change the number of columns, change the number in
4) Keep the <lj-raw> tags, else the layout will be a mess.
5) If you want to see more coding information on this, see the codepen here.
Terms of use:
→ To use this for free, all I ask is for a link back to Better Dolphin, somewhere on the post or a note in your profile. You can copy and paste this:
Muse list by: <user name="betterdolphin">
→ You may edit the layout to suit your needs or tastes, however, you are not allowed to redistribute, share or resell.
How to use:
1) Copy and paste the code below.
2) Replace URLs in <img src=""> with your own. Copy and paste <img> lines to add more images. Be sure to keep the styles.
3) To change the number of columns, change the number in
column-count and column-width to what you want, the numbers should be the same for it to be even.4) Keep the <lj-raw> tags, else the layout will be a mess.
5) If you want to see more coding information on this, see the codepen here.
Terms of use:
→ To use this for free, all I ask is for a link back to Better Dolphin, somewhere on the post or a note in your profile. You can copy and paste this:
Muse list by: <user name="betterdolphin">
→ You may edit the layout to suit your needs or tastes, however, you are not allowed to redistribute, share or resell.