ما هو دعم المتصفحات الذي يمكنني توقعه؟

CSS Grid مدعوم من قبل جميع المتصفحات الحديثة (Chrome، Firefox، Safari، و Edge). ينتج هذا المولد صيغة قياسية متوافقة دون الحاجة إلى polyfills معقدة.

ما هي الوحدات الكسرية (fr)؟

تمثّل الوحدة `fr` جزءًا من المساحة المتاحة في حاوية الشبكة. يضمن استخدام `1fr` لأعمدة متعددة أنها تشترك في المساحة المتبقية بالتساوي بعد احتساب المسارات ذات العرض الثابت.

هل يتم حفظ بيانات التخطيط الخاصة بي على خادم؟

لا. يتم تشغيل المولد بالكامل في متصفحك ولا يغادر تكوين التخطيط الخاص بك جهازك أبدًا. يمكنك نسخ الرمز مباشرة إلى حافظتك لاستخدامه في مشروعك.

ما الفرق بين المسارات والفجوات؟

المسارات هي الأعمدة والصفوف الفعلية التي تحتوي على المحتوى، بينما تحدد الفجوات (القنوات) المساحة الفارغة بين تلك المسارات. يمكنك ضبط `grid-gap` للتحكم في التباعد دون التأثير على حجم المسار.

الألوان والتصميم

مولد تخطيط شبكة CSS

Drag track sizers, copy the CSS Grid.

Runs in your browser

Columns3Rows2Gap12px

Column tracks

Row tracks

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 12px;
}

ملاحظة المحرر

Understanding · The first real layout system the web has had.

هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.

الأسئلة المتكررة

Quick answers.

›What browser support can I expect?

CSS Grid is supported by all modern browsers (Chrome, Firefox, Safari, and Edge). This generator produces standard syntax that is compatible without the need for complex polyfills.

›What are fractional units (fr)?

The `fr` unit represents a fraction of the available space in the grid container. Using `1fr` for multiple columns ensures they share the remaining space equally after fixed-width tracks are accounted for.

›Is my layout data saved to a server?

No. The generator runs completely in your browser and your layout configuration never leaves your machine. You can copy the code directly to your clipboard for use in your project.

›What is the difference between tracks and gaps?

Tracks are the actual columns and rows that hold content, while gaps (gutters) define the empty space between those tracks. You can adjust the `grid-gap` to control spacing without affecting track sizing.

يبحث الأشخاص أيضًا عن

أدوات ذات صلة

More in this room.

شاهد الكل في الألوان والتصميم