حاسبة أعمدة الشبكة
عروض الأعمدة لأي حاوية وعدد أعمدة ومسافة فاصلة — مع كود CSS Grid جاهز للنسخ وقياسات الامتداد متعدد الأعمدة.
819 مشاهدة
رياضيات الأعمدة
العمود = (الحاوية − (الأعمدة−1) × المسافة الفاصلة) ÷ الأعمدة. حاوية بعرض 1200 بكسل مع 12 عمودًا ومسافات فاصلة 24 بكسل تعطي أعمدة بعرض 78 بكسل؛ عنصر يمتد عبر 4 أعمدة يكون 4×78 + 3×24 = 384 بكسل. تسرد الأداة كل عرض امتداد حتى تنقل القياسات الدقيقة إلى ملفات التصميم.
في CSS نادرًا ما تُكتب هذه القيم يدويًا: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px يجعل المتصفح يقوم بالقسمة. تُعد قيم البكسل مهمة لإطارات Figma وتصدير الصور وفهم القيمة الفعلية التي تتحول إليها 1fr عند نقاط الكسر لديك.
الأسئلة الشائعة
هل يجب تضمين الهوامش في عرض الحاوية؟
لا — أدخل عرض المحتوى (الحاوية ناقص الهوامش/الحشو الجانبي). تصميم بعرض 1440 بكسل بهامش 120 بكسل من كل جانب يعطي حاوية عمل بعرض 1200 بكسل.
12 عمودًا أم عدد آخر؟
12 يقبل القسمة على 2 و3 و4 و6، ولهذا أصبح القيمة الافتراضية. تستخدم لوحات التحكم الكثيفة أحيانًا 24 عمودًا؛ بينما تكفي 6 أو حتى 4 أعمدة لصفحات التسويق البسيطة.
أدوات مشابهة
الإبلاغ عن مشكلة
حاسبة أعمدة الشبكة