مُولِّد أعمدة CSS أنشئ تخطيطات نصية متعددة الأعمدة مع عدد أعمدة وفراغ وتحسين نمط قابلين للتخصيص.
مُولِّد أعمدة CSS
أنشئ تخطيطات نصية متعددة الأعمدة مع عدد أعمدة وفراغ وتحسين نمط قابلين للتخصيص.
حدد عدد الأعمدة أو العرض
اختر بين وضع عدد أعمدة ثابت أو عرض أعمدة مستجيب.
تصميم قواعد الأعمدة
حدد حجم الفاصل وخصمص أسلوب الخط المفرق، وعرضه، ولونه.
نسخ CSS
معاينة تخطيط النص متعدد الأعمدة ونسخ CSS.
What Is مُولِّد أعمدة CSS?
مُولِد أعمدة CSS يخلق تخطيطات نصية متعددة الأعمدة تذكرنا بتصاميم الجرائد أو المجلات. يسمح وحدة التخطيط المتعدد للأعمدة في CSS بنقل المحتوى عبر عدة أعمدة تلقائيًا، ويمنحك هذا الأداة التحكم المرئي في جميع الخصائص الرئيسية. يمكنك الاختيار بين column-count (عدد ثابت من الأعمدة) أو column-width (أعمدة مستجيبة تتغير حسب عرض الحاوية). خاصية column-gap تتحكم في المسافة بين الأعمدة، وcolumn-rule تضيف خطًا مقسمًا مرئيًا بين الأعمدة بأسلوب قابل للتخصيص وعرض ولون. يظهر المعاينة إعداداتك المطبقة على نص عينة، مما يُемон كيفية تدفق المحتوى عبر الأعمدة. تقنية التخطيط هذه ممتازة للصفحات الثقيلة بالنصوص والمقالات والوثائق.
Why Use مُولِّد أعمدة CSS?
-
تبديل بين وضع عدد الأعمدة ووضع عرض الأعمدة
-
قاعدة أعمدة قابلة للتخصيص مع خيارات أسلوب، وعرض، ولون
-
معاينة في الوقت الفعلي مع نص عينة متدفق
-
سبعة خيارات لأسلوب القاعدة بما في ذلك الصلب، والمشطوف، والمنقط
Common Use Cases
تصاميم المقال
إنشاء تخطيطات مقال متعددة الأعمدة على نمط الجرائد لتحسين القراءة.
صفحات الوثائق
استخدام الأعمدة لقوائم المصطلحات، والفهارس، وصفحات المراجع.
قائمة البطاقات
ترتيب المحتوى الشبيه بالبطاقات في تخطيط متعدد الأعمدة على نمط الحجارة المسطحة.
محتوى التذييل
تنظيم روابط التذييل والمعلومات في أعمدة منظمة.
Technical Guide
تستخدم وحدة أعمدة CSS column-count لتحديد عدد الأعمدة بدقة أو column-width لإعداد عرض عمود 최 thiểu (يحدد المتصفح العدد الأمثل). خاصية column-gap تحدد المسافة بين الأعمدة. column-rule هو اختصار لـ column-rule-width و column-rule-style و column-rule-color، ويضيف خطًا مقسمًا مرئيًا بين الأعمدة. يتحرك المحتوى تلقائيًا من عمود إلى آخر. لمنع العناصر من الكسر عبر الأعمدة، استخدم break-inside: avoid. خاصية column-span: all تجعل عنصرًا يمتد عبر جميع الأعمدة (مفيد للعناوين). تعمل تخطيطات الأعمدة جيدًا للمحتوى النصي ولكنها قد تسبب مشاكل مع العناصر التفاعلية أو الصور. لتصاميم الويب المستجيبة، يُفضل عمومًا column-width على column-count لأنه يتكيف مع عرض الحاوية بشكل طبيعي.
Tips & Best Practices
-
1استخدام عرض العمود لتصاميم مستجيبة تتبع حجم الحاوية
-
2إضافة break-inside: avoid لمنع كسر المحتوى غير المريح
-
3استخدام column-span: all للعناوين التي يجب أن تمتد على جميع الأعمدة
-
4الحفاظ على عدد الأعمدة أقل من 4 لقراءة مريحة على الشاشات
Related Tools
مسرح تجريبي ل CSS Flexbox
مستكشف CSS Flexbox المرئي مع عناصر تحكم تفاعلية لجميع خصائص حاوية المرونة.
🎨 CSS & Design
ملعب CSS Grid
بناء CSS Grid بصروري مع عناصر تحكم تفاعلية لأعمدة القالب والصفوف والفراغات.
🎨 CSS & Design
مُختبر التصميم المرن
معاينة المواقع الإلكترونية في نقاط انقطاع الأجهزة الشائعة باستخدام عارض إطار متضمّن.
🎨 CSS & Design
مُولِد مقياس الطباعة
إنشاء مقياس طباعي متجدد مع حجم أساسي قابل للتعديل ونسبة ووحدات.
🎨 CSS & DesignFrequently Asked Questions
Q ما الفرق بين عدد الأعمدة وعرض العمود؟
Q هل يمكنني منع المحتوى من الكسر بين الأعمدة؟
Q هل يعمل تخطيط متعدد الأعمدة مع الصور؟
Q هل يمكنني امتداد عنصر عبر جميع الأعمدة؟
Q هل يدعم تخطيط متعدد الأعمدة في جميع المتصفحات؟
About This Tool
مُولِّد أعمدة CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.