مولّد CSS Grid وFlexbox
اضبط الصفوف والأعمدة والمحاذاة والمسافات بصريًا وانسخ مثال HTML وCSS صغيرًا.
px
صناديق المعاينة بارتفاعات مختلفة لترى أثر المحاذاة.
النتيجة
اختر تخطيطًا لتراه.
طريقة الاستخدام
- اختر شبكة أو مرنًا.
- اضبط الأعمدة والمسافة والمحاذاة الرأسية.
- انسخ CSS للحاوية، ولعناصرها في التخطيط المرن.
أمثلة
- شبكة من ثلاثة أعمدةشبكة، 3 أعمدة، مسافة 16 grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
- ثلاثة في الصف المرنمرن، 3 أعمدة، مسافة 16 .container > * { flex: 0 0 calc((100% - 32px) / 3); }
تفاصيل الأداة والخصوصية
اضبط شبكة CSS أو صفًا مرنًا بالأعمدة والمسافة والمحاذاة، وشاهد الصناديق تتحرك، ثم انسخ CSS.
صناديق المعاينة بارتفاعات مختلفة، فترى أثر كل إعداد بدقة.
الخيارات
- من 1 إلى 6 أعمدة، ومسافة من 0 إلى 80 بكسل، ومحاذاة مط أو وسط أو أعلى.
الحدود
- هذا CSS التخطيط فقط وليس صفحة كاملة.
- لا تُضاف نقاط تغيير للشاشات.
الخصوصية
ما تكتبه يبقى في متصفحك. لا يُرفع شيء ولا يُحفظ على الخادم.
أسئلة
ماذا تستخدم شبكة من 3 أعمدة؟
repeat(3, minmax(0, 1fr)).
كيف تتقاسم العناصر المرنة الصف؟
يأخذ كل عنصر flex: 0 0 بحصة متساوية من الصف.
هل يكتب HTML؟
لا، ينسخ CSS.
هل يُرفع شيء؟
لا.