منشئ الأعمدة المتعددة CSS
وزّع النص في أعمدة على طراز الجرائد — العدد، الفجوة وخط الفاصل — مع معاينة حية وكود CSS.
785 مشاهدة
يُوزّع تخطيط الأعمدة المتعددة نصًا طويلًا جنبًا إلى جنب مثل صفحة جريدة. غيّر العدد والفجوة وشاهد هذا النص التجريبي يُعاد توزيعه فورًا. فعِّل خط الفاصل لرسم خط رفيع بين الأعمدة. في المقالات الطويلة يُقصّر طول السطر مما يجعل القراءة أسهل. يُوزّع تخطيط الأعمدة المتعددة نصًا طويلًا جنبًا إلى جنب مثل صفحة جريدة. غيّر العدد والفجوة وشاهد هذا النص التجريبي يُعاد توزيعه فورًا. فعِّل خط الفاصل لرسم خط رفيع بين الأعمدة. في المقالات الطويلة يُقصّر طول السطر مما يجعل القراءة أسهل.
تخطيط الأعمدة المتعددة في CSS
تُقسّم column-count محتوى الكتلة إلى أعمدة متساوية على طراز الجرائد؛ يحدّد column-gap الفجوة بينها، بينما يرسم column-rule خط فاصل (بنفس صياغة border). يتدفّق النص تلقائيًا من عمود إلى آخر — مثالي للمقالات الطويلة والتذييلات وقوائم الفهارس. استخدم break-inside: avoid على العناصر التي لا تريد تقسيمها بين الأعمدة.
الأسئلة الشائعة
column-count أم column-width؟
تُثبّت column-count عدد الأعمدة؛ بينما تسمح column-width للمتصفح بوضع أكبر عدد ممكن من الأعمدة بعرض لا يقل عن القيمة المحددة — وهذا أفضل للتخطيطات المتجاوبة. يمكن استخدام الاثنين معًا.
كيف أمنع عنصرًا من الانقسام بين الأعمدة؟
أضف له break-inside: avoid؛ — مفيد للبطاقات والصور ذات التعليقات وعناصر القوائم.
أدوات مشابهة
منشئ تدرجات CSS
صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة.
أنشئ
منشئ ظل الصندوق CSS
صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية.
أنشئ
منشئ استدارة الحواف CSS
دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ.
أنشئ
منشئ ظل النص CSS
صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي.
أنشئ
الإبلاغ عن مشكلة
منشئ الأعمدة المتعددة CSS