非尺寸钻石设计可在HTML和CSS中创建图像库

Question

I am trying to create a Diamond design to use as a Image gallery.

My Intended design is like bellow picture:

As you can see, design is Consists of many Diamonds with three different size ( 75px , 150px or 225px ) in a container (for example a Div element) with a specific size.

I try many ways to create that but I could not make exactly this Design.

one of the ways that I test is use Masonry jquery plugin to create a simple grid and then rotate parent container 45 degrees.

 $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 75, gutter: 5 }); 

 #gallery { height: 400px; border: 1px solid red; } #gallery .grid { width: 500px; height: 600px; transform: rotate(45deg); border: 1px solid blue; } #gallery .grid .grid-item { width: 75px; border: 1px solid green; height: 75px; } #gallery .grid .grid-item-width2 { width: 150px; height: 150px; } #gallery .grid .grid-item-width3 { width: 225px; height: 225px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script> <div id="gallery"> <div class="grid"> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> </div> 

But it has many problems So that there are many gaps between diamonds and may be blank spaces in corner of main container and even may some diamonds Placed at out of container completely.

What is solution? how Can I create a design like that have not above problems?

Answer 1

Actually gaps between diamonds are result of " border ". When you use border, it increases size of element and they can't fit to container (you can disable transform to see that). You may consider using " outline " instead of "border" to solve this.

Also to fill empty corners you need to add more item(diamond) and increase the size of grid.

 $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 75 }); 

 #gallery { height: 400px; outline: 1px solid red; } #gallery .grid { width: 500px; height: 600px; transform: rotate(45deg); outline: 1px solid blue; } #gallery .grid .grid-item { width: 75px; outline: 1px solid green; height: 75px; } #gallery .grid .grid-item-width2 { width: 150px; height: 150px; } #gallery .grid .grid-item-width3 { width: 225px; height: 225px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script> <div id="gallery"> <div class="grid"> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> </div> 

Answer 2

Add Margin & overflow hidden

 $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 75, gutter: 10 }); 

 #gallery { height: 400px; border: 1px solid red; overflow:hidden; } #gallery .grid { width: 500px; height: 600px; transform: rotate(45deg); border: 1px solid blue; } #gallery .grid .grid-item { width: 75px; border: 1px solid green; height: 75px; margin:3px; } #gallery .grid .grid-item-width2 { width: 150px; height: 150px; margin:3px; } #gallery .grid .grid-item-width3 { width: 225px; height: 225px; margin:3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script> <div id="gallery"> <div class="grid"> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item-width2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> </div>