كيف أجعل مواضيع المقالات كنظام المربعات أو ما يعرف بـ Grid Post

السلام عليكم ورحمة الله وبركاته

أقوم حالياً بتصميم ثيم ووردبرس خاص بي، ولا زلت في البداية، أريد أن أعرف كيفية عمل المقالات كنظام المربعات أو ما يعرف بـ Grid Posts.

هذه صورة للثيم حالياً

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

هذه طريقتي

display: Block;
width:50%;
margin: 0;

وهناك هذه الطريقة

@akremjab

mohamed_refat أضف ردا

الطريقة التى استخدمها في حالة عدم استخدام أى إطار عمل جاهز

استخدم هذه الطريقة

شاهد المثال المباشر من هنا

يمكنك التعديل على الكود كما تشاء

ملحوظة في المثال استخدمت الكود التالى لضبط أبعاد المتصفح *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

حيث جعلت كل عمود يأخذ مساحة 33.3% أى يصبح في كل صف 3 أعمدة بينما استخدمت الهوامش من أعلى وأسفل فقط

واستخدمت 10 بيكسل كحشو داخل كل عمود

ولون الخلفية ليست مطبقة على الأعمدة بل هي مطبقة للبلوك الموجود داخل العمود وكأنني طرقت مسافات فارغة بين الأعمدة