2
イメージギャラリーとして使用するためにダイヤモンドデザインを作成しようとしています。イメージギャラリーをhtmlとcssで作成する非サイズのダイヤモンドデザイン
私の意図したデザインが怒鳴る絵のようなものです： 
あなたが見ることができるように、デザインは（容器の中に（75px、150ピクセルまたは225px）には3種類のサイズで多くのダイヤモンドで構成されています特定のサイズのDiv要素など）を指定します。
私はそれを作るために多くの方法を試しましたが、私はこのデザインを正確にはできませんでした。
私がテストする方法の1つは、単純なグリッドを作成してから親コンテナをローテーションするのに、Masonry jquery pluginを使用することです。
$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/[email protected]/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>解決策は何ですか？どのように私は上記のような問題を抱えていないようなデザインを作成できますか？
オーバーフロー追加します。このため表示#galleryに隠された - 完全にコンテナの外に置かれたいくつかのダイヤモンドを。 –
@LaljiTadhaniもちろん、私は容器の外にダイヤモンドを入れたくありません。あなたのソリューションはそれらを隠すだけです。それらの間のギャップはどうですか？ –