It is necessary to obtain the structure of the tiles as in the image.

It is necessary to obtain the structure of the tiles as in the image using the masonry library.

It is also necessary that the order of the tiles is not violated.

The problem is that it is impossible to make such a structure as in the image. If I specify the size of the tiles 30% 40% 30%, they are rearranged in the wrong order. But if you specify 25% 50% 25%, then the tiles become the right way.

css

* { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { margin: 0 !important; background: #EEE; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer, .grid-item { width: 30%; } .grid-item { height: 120px; float: left; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .grid-item--width2 { width: 40%; height: 240px; }

html

 <div class="grid"> <div class="grid-sizer"></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 grid-item--width2"></div> <div class="grid-item"></div> </div>

js

  $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', gutter: 0, //Отключить отступы percentPosition: true, //Позиционирование в процентах horizontalOrder: true // горизонтальный порядок плиток (по порядку) });

    1 answer 1

    Hastily. Why not?

     * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { margin: 0 !important; background: #EEE; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer{ } .grid-item { float:left; width: 30%; height: 120px; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .grid-item--width2 { float: left; width: 40%; float: center; height: 240px; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .item{ height: 33%; } 
     <div class="grid"> <div class="grid-item"> <div class="item">1.1</div> <div class="item">1.2</div> <div class="item">1.3</div> </div> <div class="grid-item--width2"> <div class="item">21</div> <div class="item">22</div> <div class="item">23</div> </div> <div class="grid-item"> <div class="item">31</div> <div class="item">32</div> <div class="item">33</div> </div> </div>

    • Well, with columns, it is clear that it will work), just wondering why the library is not working correctly - veti4