إنشاء عدة أعمدة بأحجام مختلفة بجانب بعضها البعض في css

بدل ان يكون ال grid مقسم لثلاث صفوف اجعله مقسم ل 6 صفوف واعط الـ  h3  خمس نقاط طول و الـ h6 نقطة طول واحدة

وباقي العناصر تكون حصتها هي نقطتا طول لكل واحد بالشكل التالي : 

grid-template-areas: 
            "h3 h1 h2"
            "h3 h1 h2"
            "h3 h4 h5"
            "h3 h4 h5"
            "h3 h7 h8"
            "h6 h7 h8";

اذا كنت عملت التصميم بطريقة غير ال grid قم بمشاركة الكود الخاص بك حتى استطيع مساعدتك.

دي طريقتي اللى بستخدمها

HTML

<div class="grid grid-3 style-1">
    <div class="grid-col"><div class="fix-height"><div>grid-col-1</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-2</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-3</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-4</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-5</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-6</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-7</div></div></div>
    <div class="grid-col"><div class="fix-height"><div>grid-col-8</div></div></div>
</div>

CSS

.grid{
  display:grid
}
.grid-3 {
  grid-template-columns: 33.333333% 33.333333% 33.333333%;
}

.grid-col{
  padding:5px;
  overflow: hidden;
}

.grid-col .fix-height{
  background:#ddd;
  padding:15px;
  height:100%;
  overflow: hidden;
}

.grid-3.style-1 .grid-col:nth-of-type(3){
  grid-area: 1 / 1 / 3 / 1;
}

النتيجة هتكون كده

بإمكانك التعديل على القيم التالية باللي يناسبك

grid-area: 1 / 1 / 3 / 1;

/*
grid-row-start: 1; بداية الصف
grid-column-start: 1; بداية العمود
grid-row-end: 3; نهاية الصف
grid-column-end: 1; نهاية العمود

*/