جدول المحتويات:

كيف أقوم بإنشاء تخطيط شبكي في CSS؟
كيف أقوم بإنشاء تخطيط شبكي في CSS؟

فيديو: كيف أقوم بإنشاء تخطيط شبكي في CSS؟

فيديو: كيف أقوم بإنشاء تخطيط شبكي في CSS؟
فيديو: تطبيق عملي html css | تعلم html 2024, شهر نوفمبر
Anonim

دعنا نلخص الخطوات الأربع الأساسية:

  1. إنشاء عنصر حاوية ، ويعلن أنه يعرض: جريد ;.
  2. استخدم نفس الحاوية لتعريف ملف جريد المسارات باستخدام جريد - نموذج -أعمدة و جريد - نموذج خصائص الصفوف.
  3. ضع العناصر الفرعية داخل الحاوية.
  4. حدد أحجام هامش التوثيق باستخدام جريد -خصائص الفجوة.

هنا ، هل يمكنني استخدام تخطيط شبكة CSS؟

بخلاف Internet Explorer ، تخطيط شبكة CSS غير مسبوق في Safari و Chrome و Opera و Firefox و Edge. دعم جميع الخصائص والقيم المفصلة في هذه الأدلة قابل للتشغيل المتبادل عبر المستعرضات. هذا يعني أنك إذا كتبت بعض تخطيط الشبكة في Firefox ، يجب أن يعمل بنفس الطريقة في Chrome.

بالإضافة إلى ذلك ، هل يجب علي استخدام Flexbox أو الشبكة؟ على حد سواء فليكس بوكس و جريد تستند إلى هذا المفهوم. فليكس بوكس هو الأفضل لترتيب العناصر في صف واحد أو عمود واحد. جريد هو الأفضل لترتيب العناصر في صفوف وأعمدة متعددة. تحدد الخاصية justify-content كيفية تحديد المساحة الإضافية لـ ثني -يتم توزيع الحاوية على ثني -العناصر.

وبالمثل ، ما هو 1fr؟

1 فرنك هي "وحدة كسرية" ، وهي طريقة لقول "المساحة المتبقية في العنصر".

ما هي شبكة Flexbox؟

فليكس بوكس مصنوع من أجل تخطيطات ذات بعد واحد و جريد مصنوع لتخطيطات ثنائية الأبعاد. هذا يعني أنك إذا كنت تضع العناصر في اتجاه واحد (على سبيل المثال ثلاثة أزرار داخل رأس) ، فيجب عليك استخدام فليكس بوكس : سيمنحك مرونة أكبر من CSS جريد.

موصى به: