راهنمای ایجاد متن چند ستونی در css | آموزش css رایگان

متن چند ستونی در CSS

حتما دیده اید که بعضا در صفحات وب، نوشته هایشان را مانند روزنامه ها در چند ستون می نویسند. روش های مختلفی برای پیاده سازی چنین حالتی وجود دارد (استفاده از grid و ...) اما دستور -column دستور اصلی و اختصاصی برای نوشتن متن چند ستونی در css است که به دستورات زیر تقسیم می شود:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

پشتیبانی از این دستورات به صورت زیر است:

خصوصیت	کروم	Edge	فایرفاکس	سافاری	اپرا
column-count	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-gap	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-color	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-style	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-width	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-span	50.0 4.0 -webkit-	10.0	پشتیبانی نمی شود	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-width	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

باید تک تک این دستورات را بررسی کنیم تا با آن ها آشنا شویم.

ایجاد ستون های چندگانه

دستور column-count تعداد ستون های ما را مشخص می کند. به طور مثال کد زیر متن داخل <div> را به سه ستون تقسیم می کند:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این دستور و دیگر دستورات (طبق جدول بالا) در اینترنت اکسپلورر 9 و نسخه های قدیمی تر کار نمی کنند.

فاصله ی میان ستون ها

دستور column-gap فاصله ی میان ستون ها را مشخص می کند. مثال زیر بین ستون ها 40 پیکسل فاصله می گذارد:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استایل ستون ها

شما می توانید با دستور column-rule-style خطی که ستون ها را از هم جدا می کند استایل دهی کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  column-rule-style: solid;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

البته می توانید با استفاده از دستور column-rule-width عرض این خط جداکننده را نیز تعیین کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  column-rule-style: solid;
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  column-rule-width: 1px;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در صورت نیاز به تعیین رنگ این خط جدا کننده، باید از دستور column-rule-color استفاده کنید. ما این خط را در مثال زیر آبی کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  column-rule-style: solid;
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  column-rule-width: 1px;
  -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: lightblue; /* Firefox */
  column-rule-color: lightblue;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-color property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تمام دستورات بالا در یک دستور، یعنی دستور column-rule، خلاصه می شوند. ما در مثال زیر تمامی این دستورات را ادغام کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid lightblue; /* Firefox */
  column-rule: 1px solid lightblue;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تعیین حدود ستون ها

دستور column-span تعیین می کند که یک عنصر تا چند عنصر را در بر می گیرد. به طور مثال در کد زیر گفته ایم که <h2> باید روی تمام عناصر باشد (یعنی خودش داخل ستون قرار نگیرد اما بقیه ی مطالب در ستون ها پخش شوند):

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  column-gap: 40px;
  -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid lightblue; /* Firefox */
  column-rule: 1px solid lightblue;
}

h2 {
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}
</style>
</head>
<body>

<p><b>Note:</b> Firefox and Internet Explorer 9 (and earlier versions) do not support the column-span property.</p>

<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

با حذف کردن دستور column-span از کد بالا و بازی با کد متوجه تفاوت خواهید شد.

تعیین عرض ستون ها

دستور column-width به شما اجازه می دهد عرض ستون هایتان را کنترل کنید. به طور مثال کد زیر می گوید که بهترین عرض برای ستون های من 100px است:

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-width property.</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin