How to make a grid on the Masonry?

Hi all.
Tell me how to do Masonry on a grid. Broke the entire head. The unusual structure.
i.prntscr.com/cfeecebb91cd48a9a9614cdad63e152b.png
June 26th 19 at 14:16
3 answers
June 26th 19 at 14:18
<div class="grid">
 <div class="grid-item grid-item width2--grid--item height2">1</div>
 <div class="grid-item grid-item width2--grid-item--height1">2</div>
 <div class="grid-item grid-item--height2">3</div>
 <div class="grid-item">4</div>
 <div class="grid-item grid-item--height2">5</div>
 <div class="grid-item">6</div>
 <div class="grid-item">7</div>
 <div class="grid-item">8</div>
 <div class="grid-item grid-item--width2">9</div>
</div>

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
 background: #EEE;
 max-width: 320px;
}

/* clearfix */
.grid:after {
 content: ";
 display: block;
 clear: both;
}

/* ---- grid-item ---- */

.grid-item {
 width: 80px;
 height: 80px;
 float: left;
 background: #D26;
 border: 2px solid #333;
 border-color: hsla(0, 0%, 0%, 0.5);
 border-radius: 0px;
}

.grid-item--width2 { width: 160px; }
.grid-item--width3 { width: 240px; }
.grid-item--width4 { width: 320px; }

.grid-item--height2 { height: 160px; }
.grid-item--height3 { height: 240px; }
.grid-item--height4 { height: 320px; }

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


fdb55f59e92e47de8963b55ddd607d8c.png
Here error 9 the unit is a square should be, and 8 the rectangle here's the RUB... Here (in the question) is easier with absolute positioning)) - skylar_Leuschke commented on June 26th 19 at 14:21
: I don't see any problems and snags to move the class grid-item width2-- the eighth element.
<div class="grid">
 <div class="grid-item grid-item width2--grid--item height2">1</div>
 <div class="grid-item grid-item width2--grid-item--height1">2</div>
 <div class="grid-item grid-item--height2">3</div>
 <div class="grid-item">4</div>
 <div class="grid-item grid-item--height2">5</div>
 <div class="grid-item">6</div>
 <div class="grid-item">7</div>
 <div class="grid-item grid-item--width2">8</div>
 <div class="grid-item">9</div>
</div>

671b0fa6ae4149ee961d504113ea0070.png - Gene94 commented on June 26th 19 at 14:24
June 26th 19 at 14:20
and what is difficult?
That I don't want the tiles to line up in the correct order
i.prntscr.com/ad7ff31175024b678486fb646f8d82c0.png - skylar_Leuschke commented on June 26th 19 at 14:23
: The order to build them you can't. The grid itself builds the order based on the size of the blocks - Gene94 commented on June 26th 19 at 14:26
thanks for the answers already figured out. It was necessary to configure the library itself to set the width of the tiles, and they have me lined up in two columns instead of three. - emmie.Ma commented on June 26th 19 at 14:29
: delete the question - yoshiko_Corwin15 commented on June 26th 19 at 14:32
: it is not necessary to remove ) - emmie.Ma commented on June 26th 19 at 14:35
June 26th 19 at 14:22
Bootstrap is easily done

Find more questions by tags jQueryCSS