Я хочу построить 2-х колоночную кладочную сетку.Я попытался использовать column-count, но если вы посмотрите на последний элемент сетки - текст почему-то разбивается на следующий столбец.И когда я попробовал использовать flex, элементы не выровнялись должным образом в каменной форме.
.workshop {
width: 100% !important;
margin: 0 0 1rem 0 !important;
padding: 0 15px;
float: right;
}
.workshop-img {
position: relative;
overflow: hidden;
float: right;
width: 100%;
}
.workshop-date {
position: absolute;
top: 20px;
right: 0;
padding: 10px 15px;
background: white;
text-align: center;
border-radius: 20px 0 0 20px;
color: black;
}
.js-wpv-view-layout {
column-count: 2;
-webkit-column-count: 2;
column-gap: 15px;
-webkit-column-gap: 15px;
float: right;
width: 100%;
direction: rtl;
}
.workshop-title {
margin-top: 1rem;
}
.workshop-promo {
position: relative;
float: right;
margin-top: 1rem;
}
.workshop-promo p,
.workshop-promo a {
color: black;
text-align: justify;
}
<div id="wpv-view-layout-10173" class="js-wpv-view-layout">
<!-- WPV_Infinite_Scroll -->
<!-- WPV_Infinite_Scroll_Insert -->
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/"><img width="800" height="798" src="http://outofsite.co.il/liat/wp-content/uploads/2018/12/Dalit-kaplan-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/">סדנא כתומה עם דלית קפלן</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90-%d7%9b%d7%aa%d7%95%d7%9e%d7%94-%d7%a2%d7%9d-%d7%93%d7%9c%d7%99%d7%aa-%d7%a7%d7%a4%d7%9c%d7%9f/">
<p>תודו שאם לשים משקפיים ורודות אז שיהיו מקרונים. אז דלית ואני רקחנו לכם סדנא כתומה לכבוד טנקסגיבינג, עם פחזניות וסטיקי באנס ומלא הפתעות כתומות אחרות. ורק בשביל הפאן נגיע בפיג'מות, נדליק את האח ואם תהיו ילדים טובים נעשה לכם גם סיידר. אם כבר
אז כבר.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/"><img width="800" height="1200" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/8d18f3cf-6b0f-417c-9286-77aaf3f82c1a.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
ספטמבר, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/">בישול רוא פוד עם ניר לוי</a></h3>
<p>מספר מפגשים: 2
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%a8%d7%95%d7%90-%d7%a4%d7%95%d7%93-%d7%a2%d7%9d-%d7%a0%d7%99%d7%a8-%d7%9c%d7%95%d7%99/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/"><img width="1200" height="799" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/Mika.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
מאי, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/">סדנאת בישול בוכרית עם מיקה שמעונוב</a></h3>
<p>מספר מפגשים:
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%91%d7%99%d7%a9%d7%95%d7%9c-%d7%91%d7%95%d7%9b%d7%a8%d7%99%d7%aa-%d7%a2%d7%9d-%d7%9e%d7%99%d7%a7%d7%94-%d7%a9%d7%9e%d7%a2%d7%95%d7%a0%d7%95%d7%91/">
<p>מסע קולינרי על דרך המשי הוא חוויה של ריחות, טעמים וצבעים. דרך המשי משתרעת מסין שבמזרח ועד טורקיה. המטבחים על דרך המשי הושפעו האחד מהשני ויצרו עירוב מרתק של טעמים ותרבויות ששזורות זו בזו. כבת לעולים מאוזבקיסטן, בשבילי, המטבח הבוכרי הוא בית.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/"><img width="1125" height="1126" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/IMG_9240.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
מרץ, 2018
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/">סדנאת אפיה קינוחים לפסח עם אלון שבו</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%9d-%d7%9c%d7%a4%d7%a1%d7%97-%d7%a2%d7%9d-%d7%90%d7%9c%d7%95%d7%9f-%d7%a9%d7%91%d7%95/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/"><img width="800" height="715" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/43062098_2011117495575336_2225091791483305984_n-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
דצמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/">ערב רפרם וטוניס</a></h3>
<p>מספר מפגשים: 3
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a2%d7%a8%d7%91-%d7%a8%d7%a4%d7%a8%d7%9d-%d7%95%d7%98%d7%95%d7%a0%d7%99%d7%a1/">
<p>רפרם חדד הוא אמן ויזואלי וחוקר אוכל. הוא חוקר את הקשר בין קראפט לאמנות ותרבות עכשווית ובאוכל הוא עוסק בקשר בין אוכל יהודי, ים תיכוני וזה הביוגרפי שלו. הוא חי ועובד בתוניסיה, תורם מתכונים לספרים ובעבר עמד בראש תנועת סלואו פוד בישראל ולימד על אוכל
באקדמיה לאמנות בבצלאל.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/"><img width="1280" height="1106" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/1fb86d11-d893-46d2-b1f1-3d5e7f2dba25-1.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/">סדנאת קינוחי בוטיק עם אפרת ליבפריונד</a></h3>
<p>מספר מפגשים: 3
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%90%d7%aa-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7-%d7%a2%d7%9d-%d7%90%d7%a4%d7%a8%d7%aa-%d7%9c%d7%99%d7%91%d7%a4%d7%a8%d7%99%d7%95%d7%a0%d7%93/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<div class="workshop">
<div class="workshop-img">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/"><img width="800" height="1200" src="http://outofsite.co.il/liat/wp-content/uploads/2018/09/8d18f3cf-6b0f-417c-9286-77aaf3f82c1a.jpg" class="attachment-full size-full wp-post-image" alt=""></a>
<div class="workshop-date">
נובמבר, 2017
</div>
</div>
<div class="workshop-title">
<h3><a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/">סדנת אפיה קינוחיי בוטיק</a></h3>
<p>מספר מפגשים: 1
</p>
</div>
<div class="workshop-promo">
<a href="http://outofsite.co.il/liat/workshop/%d7%a1%d7%93%d7%a0%d7%aa-%d7%90%d7%a4%d7%99%d7%94-%d7%a7%d7%99%d7%a0%d7%95%d7%97%d7%99%d7%99-%d7%91%d7%95%d7%98%d7%99%d7%a7/">
<p>מטבח הרו-פוד הוא חגיגה קולינארית בכל קנה מידה. המטבח מאופיין בשפע טעמים חיים, צבעים, יופי ויצירתיות והכי חשוב שכל המתכונים שנילמד בקורס הזה, הם מתכונים קלים ומהירים להכנה. מתאימים לאורח חיים מודרני והמהיר שלנו.</p>
</a>
</div>
</div>
<!-- WPV_Infinite_Scroll -->
</div>
https://jsfiddle.net/idoangel/7ybz6nrs/29/