مثال على خاصية column-fill في CSS3 - محرر حالي عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال خاصية column-fill CSS3 - دليل الأساسيات(oldtoolbag.com)</title>
<style>
	p.columns {
        /* Chrome, Safari, Opera */
		-webkit-column-count: 3;
        /* Firefox */
		-moz-column-count: 3;
        -moz-column-fill: auto;
        /* النحو المعياري */
		column-count: 3;
        column-fill: auto;
	}
</style>
</head>
<body>
    <p><strong>ملاحظة:</strong> يُعزز حاليًا خصائص ملء الأعمدة في Firefox فقط بـ -moz-.
    <p class="columns">الرحلة الطويلة تبدأ بخطوة واحدة، البناء العظيم يبدأ بالتراب. البداية الجيدة مهمة جدًا للتعلم في المستقبل. ولكن اتخاذ الخطوة الثانية، الثالثة بشكل مستمر سيجعلك تتجنب الارتباك الذي يسببه الخطوة الأولى الشكلية، الحلم الجميل. الحلم سيستيقظ دائمًا، من الأفضل أن تستيقظ بنفسك، تخرج، تستمر في المضي قدمًا حتى تحقق النجاح.</p>
    الرحلة الطويلة تبدأ بخطوة واحدة، البناء العظيم يبدأ بالتراب. البداية الجيدة مهمة جدًا للتعلم في المستقبل. ولكن اتخاذ الخطوة الثانية، الثالثة بشكل مستمر سيجعلك تتجنب الارتباك الذي يسببه الخطوة الأولى الشكلية، الحلم الجميل. الحلم سيستيقظ دائمًا، من الأفضل أن تستيقظ بنفسك، تخرج، تستمر في المضي قدمًا حتى تحقق النجاح.
    الرحلة الطويلة تبدأ بخطوة واحدة، البناء العظيم يبدأ بالتراب. البداية الجيدة مهمة جدًا للتعلم في المستقبل. ولكن اتخاذ الخطوة الثانية، الثالثة بشكل مستمر سيجعلك تتجنب الارتباك الذي يسببه الخطوة الأولى الشكلية، الحلم الجميل. الحلم سيستيقظ دائمًا، من الأفضل أن تستيقظ بنفسك، تخرج، تستمر في المضي قدمًا حتى تحقق النجاح.
   الرحلة الطويلة تبدأ بخطوة واحدة، البناء العظيم يبدأ بالتراب. البداية الجيدة مهمة جدًا للتعلم في المستقبل. ولكن اتخاذ الخطوة الثانية، الثالثة بشكل مستمر سيجعلك تتجنب الارتباك الذي يسببه الخطوة الأولى الشكلية، الحلم الجميل. الحلم سيستيقظ دائمًا، من الأفضل أن تستيقظ بنفسك، تخرج، تستمر في المضي قدمًا حتى تحقق النجاح.
    الرحلة الطويلة تبدأ بخطوة واحدة، البناء العظيم يبدأ بالتراب. البداية الجيدة مهمة جدًا للتعلم في المستقبل. ولكن اتخاذ الخطوة الثانية، الثالثة بشكل مستمر سيجعلك تتجنب الارتباك الذي يسببه الخطوة الأولى الشكلية، الحلم الجميل. الحلم سيستيقظ دائمًا، من الأفضل أن تستيقظ بنفسك، تخرج، تستمر في المضي قدمًا حتى تحقق النجاح.</p>
</body>
</html>