3 أعمدة متساوية لتخطيط شبكة CSS
تصميم تخطيطات شبكة CSS بشكل مرئي: قم بتعيين الأعمدة والصفوف والفجوات، ثم اكتب أسماء المناطق في الخلايا لإنشاء مناطق قالب الشبكة - مع معاينة مباشرة وCSS وHTML قابلة للنسخ.
النتيجة
تفتح هذه الصفحة مجموعة منشئات الشبكة التي تم تعيينها على ثلاثة أعمدة متساوية العرض في صف واحد، مع إيقاف تشغيل المناطق المسماة - يتم تكرار التخطيط فقط (3، 1fr)، وهي أقصر طريقة لقول "ثلاثة أعمدة تقسم دائمًا العرض المتاح بالتساوي."
الأعمدة ذات العرض المتساوي هي العمود الفقري لشبكات البطاقات وجداول التسعير ومعارض الصور: لا تحتاج أي منطقة إلى تسمية لأن كل عمود يلعب نفس الدور، لذا فإن حجم المسار العادي يكون أكثر وضوحًا من إعلان مناطق قالب الشبكة. أضف صفًا وتكرر نفس المسارات الثلاثة في الأسفل، مع الحفاظ على ثباتها تمامًا.
ارفع عدد الأعمدة للحصول على شبكة أكثر كثافة، أو قم بتشغيل المناطق المسماة إذا كان هناك عمود لاحق بحاجة إلى التميز عن بقية الأعمدة - يتم تحديث CSS وHTML أدناه في اللحظة التي تقوم فيها بذلك. كل شيء يتم تشغيله من جانب العميل، لذلك ليس هناك ما يمكن تحميله أو انتظاره.