ساحة تجربة CSS Grid

يحوّل CSS Grid عنصرًا إلى تخطيط ثنائي الأبعاد. تضيف display: grid على الحاوي، تحدد مسارات الأعمدة والصفوف بـ grid-template-columns وgrid-template-rows، ويضع المتصفح كل عنصر فرعي في الخلايا الناتجة. مثلًا، grid-template-columns: repeat(3, 1fr) ينشئ ثلاثة أعمدة متساوية، وتتدفق العناصر فيها من اليسار لليمين ومن الأعلى للأسفل. بعكس تخطيطات float القديمة أو flexbox، تُخطط الشبكة الصفوف والأعمدة في آنٍ واحد، فتتحكم في المحورين من خاصية حاوي واحدة.

أضف display: grid إلى حاوٍ، ثم صف مساراته. الحد الأدنى سطر واحد: display: grid; grid-template-columns: 1fr 1fr; — يعطي عمودين متساويين. من هناك تضيف grid-template-rows للصفوف الصريحة، وgap للتباعد، وقواعد خاصة بكل عنصر مثل grid-column: span 2 لجعله يمتد على خليتين. يمكن للخاصية المختصرة grid دمج الصفوف والأعمدة والمناطق في تعريف واحد، لكن أغلب المطورين يضبطون grid-template-columns وgap والمحاذاة بشكل منفصل لوضوح القراءة. هذا المولّد يكتب تلك القواعد نيابةً عنك.

يُعرِّفان حجم كل مسار عمود وصف. grid-template-columns: 200px 1fr 1fr ينشئ عمودًا أول ثابتًا بعرض 200px وعمودين مرنين يتقاسمان الباقي. grid-template-rows: auto 1fr يضبط صفًا أول بحجم المحتوى وصفًا ثانيًا يملأ الارتفاع المتبقي. كل قيمة في القائمة تمثل مسارًا واحدًا، وعدد القيم يحدد عدد الأعمدة أو الصفوف الصريحة في الشبكة. هذا المولّد يبني القائمتين كلما أضفت مسارات أو عدّلتها، مع تحديث المعاينة المباشرة فورًا.

fr هي وحدة 'الكسر' — تقسّم المساحة المتبقية، لذا repeat(3, 1fr) ينشئ ثلاثة أعمدة بعرض متساوٍ. repeat(n, value) اختصار يكرر نمط مسار n مرات، فـ repeat(4, 1fr) مماثل لـ 1fr 1fr 1fr 1fr. minmax(min, max) يضبط مسارًا لا يتقلص أدنى من min ولا يكبر أكثر من max؛ minmax(150px, 1fr) يُبقي العمود بعرض 150px على الأقل مع السماح له بالتمدد. ادمجها — repeat(auto-fit, minmax(150px, 1fr)) — للحصول على شبكة تضيف وتزيل أعمدة بنفسها كلما تغير عرض الحاوي.

استخدم repeat() مع auto-fit (أو auto-fill) وminmax() لكي تُعيد الشبكة تدفقها تلقائيًا: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). كل عمود يبقى بعرض 200px على الأقل ويضع المتصفح أكثر عدد ممكن داخل الحاوي، ينتقل لأعمدة أقل على الشاشات الضيقة ويضيف أكثر على العريضة. غيّر هذا المولّد إلى وضع المتجاوب، حدّد الحد الأدنى لعرض الخلية، وانسخ النتيجة. هذه أبسط طريقة لبناء شبكة بطاقات سائلة تتكيف من الهاتف إلى سطح المكتب دون كتابة استعلام وسائط واحد.

يتيح لك grid-template-areas تسمية المناطق ورسم التخطيط كفن ASCII. تعطي كل عنصر فرعي اسمًا بـ grid-area، ثم ترسم الشبكة مثل grid-template-areas: 'header header' 'sidebar main' 'footer footer'. تكرار اسم عبر خلايا يجعل تلك المنطقة تمتد عليها، ونقطة (.) تترك الخلية فارغة. إنها الطريقة الأكثر قابلية للقراءة لبناء هياكل الصفحات الكلاسيكية — رأس، شريط جانبي، محتوى رئيسي، تذييل — لأن القالب يبدو مثل التخطيط. يكتب تبويب المناطق هنا القالب وقواعد grid-area المطابقة لكل منطقة تسمّيها.

لشبكة 2x2، اضبط عمودين وصفين: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; وضع أربعة عناصر. لشبكة ثلاثية الأعمدة، استخدم grid-template-columns: repeat(3, 1fr) ودع العناصر تتدفق في أي عدد من الصفوف حسب الحاجة. في هذه الأداة تضبط عدد الأعمدة والصفوف فقط وتتحدث المعاينة فورًا — دون حاجة للكتابة. يتولى المولّد اختصار repeat() تلقائيًا حين تكون المسارات المجاورة بالحجم ذاته.

شبكة 12 عمودًا هي تقليد تصميمي عمّمته Bootstrap وFoundation يقسّم الصفحة إلى اثني عشر عمودًا متساويًا. الاثنا عشر مناسبون لأنهم يقسمون بشكل نظيف إلى أنصاف وأثلاث وأرباع وأسداس. يمكن للمكوّن الامتداد على أي عدد صحيح من الأعمدة: 6 لنصف، 4 لثلث، 3 لربع. بـ CSS Grid تعيد إنشاءها بسطر واحد: grid-template-columns: repeat(12, 1fr)، وتستخدم grid-column: span 4 على العناصر لتحديد حجمها. اضبط الأعمدة على 12 هنا للحصول على شبكة الإطار الكلاسيكية بـ CSS خالص دون اعتمادية على Bootstrap.

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

Tailwind يأتي بأدوات مساعدة للشبكة: أضف grid مع grid-cols-3 لثلاثة أعمدة متساوية، وgap-4 للتباعد، وcol-span-2 / row-span-2 على العناصر لجعلها تمتد. grid-cols-3 يُترجم إلى repeat(3, minmax(0, 1fr)). لأي شيء مخصص — كمسار auto-fit متجاوب — استخدم قيمة اعتباطية: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. غيّر المخرجات إلى تبويب Tailwind وسيكتب هذا المولّد فئات الأداة الدقيقة للحاوي وكل عنصر، جاهزة للصق في JSX أو HTML.

استخدم grid-column وgrid-row على العنصر الفرعي. grid-column: span 2 يجعل العنصر بعرض عمودين؛ grid-column: 1 / 3 يضعه من الخط 1 إلى الخط 3 (أيضًا عمودان). الأمر ذاته ينطبق عموديًا مع grid-row: span 2. في Tailwind هذا col-span-2 وrow-span-2. في هذا الملعب يمكنك السحب عبر الخلايا في المعاينة لإنشاء عنصر ممتد، أو كتابة قيم البداية والامتداد الدقيقة في لوحة العنصر. مخرجات CSS وTailwind كلتاهما تتحدث أثناء العمل.

خاصية gap تضيف مساحة بين المسارات: gap: 16px تضع 16px بين كل صف وعمود. يمكنك ضبط المحورين بشكل منفصل مع gap: 24px 16px (row-gap ثم column-gap)، أو استخدام row-gap وcolumn-gap مباشرة. تؤثر gap فقط على المساحة بين الخلايا — لا تضيف أبدًا حشوًا حول الحافة الخارجية للشبكة، وهو مصدر شائع للالتباس. استخدم ضوابط row-gap وcolumn-gap هنا — اربطهما لفجوة موحدة أو افصلهما لضبط كل محور بشكل مستقل.

مجاني تمامًا بلا تسجيل ولا شيء تثبّته. Layoutit Grid نقطة بداية جيدة لكن ليس لها مخرجات Tailwind وتتطلب النقر عبر تبويب منفصل لنسخ قواعد grid-area. مولّد CSS Grid الخاص بـ Sarah Drasner أداة تعليمية مبسّطة بلا ضوابط على مستوى العناصر أو روابط قابلة للمشاركة. UtiloKit يضيف مخرجات Tailwind CSS، ومناطق القالب المسمّاة، ووضع auto-fit المتجاوب، والروابط القابلة للمشاركة، ومحرر سحب لامتداد العناصر — كل ذلك في مكان واحد. كل شيء يُولَّد محليًا في متصفحك فتخطيطاتك لا تُرفع أبدًا.

نعم. الأداة متجاوبة بالكامل وتعمل في أي متصفح حديث على الهاتف بما في ذلك Safari على iPhone وChrome على Android. ابنِ تخطيطات الشبكة في أي مكان، انسخ مخرجات CSS أو Tailwind، والصقها في مشروعك. لأن كل شيء يعمل من جانب العميل، لا يوجد رفع ولا حساب ولا انتظار. يعمل حتى دون اتصال بالإنترنت بعد تحميل الصفحة. محرر سحب الامتداد للعناصر يدعم اللمس فتستطيع بناء تخطيطات شبكة معقدة بدون ماوس.