معمل Grid
أنشئ تخطيط CSS grid - عدد المسارات والفجوات والمحاذاة، وموضع كل عنصر - مع معاينة حيّة، وانسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اختر شكلًا جاهزًا، أو ابدأ من الشبكة الافتراضية 3×3.
اضبط عدد الأعمدة والصفوف والفجوات والمحاذاة.
اختر عنصرًا لتضعه ببداية وامتداد مخصصين في العمود أو الصف، ثم انسخ الكود.
أسئلة شائعة
لا. تُبنى الشبكة وكود CSS الناتج بالكامل داخل متصفحك.
أي وضع مخصص يتجاوز عدد الأعمدة أو الصفوف الذي حددته يُنشئ مسارًا ضمنيًا إضافيًا تلقائيًا - هذا كود CSS صالح، وليس خطأ.
justify-items يحدد موضع المحتوى داخل كل خلية. أما justify-content فيحدد موضع مجموعة المسارات كلها داخل الحاوية - لا يظهر فرق إلا عندما لا تملأ المسارات الحاوية بالكامل.
نعم، وهذا صحيح تمامًا. محور أعمدة الشبكة يتبع اتجاه الصفحة، فيُرسم العمود الأول على الجهة المقابلة فعليًا تحت الاتجاه من اليمين إلى اليسار، بلا أي كود إضافي - هذه الأداة تعرض سلوك CSS Grid الحقيقي، لا تقريبًا يفرض الاتجاه من اليسار إلى اليمين.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
اقرأ الدليلHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
اقرأ الدليلThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
اقرأ الدليل
التعليقات