منشئ Grid وFlex
ولّد تخطيط CSS محدودًا ومعاينة بعناصر مرقمة ومثال HTML ثابت قابل للتنزيل.
طريقة الاستخدام
اختر Grid أو Flex واضبط عدد العناصر والفجوة. للشبكة حدد الأعمدة؛ ولـFlex حدد اتجاه المحور والالتفاف. اختر المحاذاة والتوزيع ثم أنشئ النتيجة. نزّل CSS وحده أو مثال HTML الثابت المحتوي عليه.
Grid مع 6 عناصر و3 أعمدة وفجوة 16 يعطي صفين بثلاثة عناصر؛ عرض كل عمود من repeat(3, minmax(0, 1fr)). مثال HTML يحتوي العناصر المرقمة 1 إلى 6.
حدود الدعم
المعاينة والمثال يستخدمان direction: ltr صراحة بصرف النظر عن لغة الواجهة. في Flex تخص align-items المحور العرضي وjustify-content المحور الرئيسي. أعمدة Grid المرنة تملأ العرض، لذلك قد لا يظهر أثر توزيع المساحة. العناصر لها حشو 8px وارتفاع أدنى 40px؛ لا عرض أو ارتفاع حاوية ثابت في الملف. قد تتجاوز الفجوات أو عدم الالتفاف حاوية ضيقة؛ المعاينة قابلة للتمرير ولا تعني تصميمًا متجاوبًا مكتملًا. لا سكربتات أو موارد خارجية في HTML المولّد.
أسئلة شائعة
هل يمكن لصق صفحة لتعديلها؟
لا. تُنشأ القواعد والعناصر من الإعدادات المحدودة فقط. النسخ والتنزيل الأساسي يعطيان CSS؛ زر HTML يعطي مثالًا مستقلًا ثابتًا.