نحوه استفاده از ستون های CSS برای چیدمان های چند ستون وب سایت

برای چندین سال، شناورهای CSS در ساخت طرح های وب سایت جزء ظریف و در عین حال ضروری بوده است. اگر طراحی شما برای ستون های متعدد نامیده می شد، شما به شناور ها تبدیل شدید . مشکل این روش این است که، با وجود پیشگویی باورنکردنی که طراحان وب و توسعه دهندگان در ایجاد طرحهای سایت پیچیده نشان داده اند، شناورهای CSS هرگز به معنای استفاده از این شیوه نیستند.

در حالی که شناورها و موقعیت CSS مطمئن هستند که در طراحی وب سایت برای سالهای زیادی جای دارند، تکنیک های جدیدتر طرح شامل CSS Grid و Flexbox اکنون طراحان وب را برای ایجاد طرح های سایت خود طراحی می کند. یکی دیگر از تکنیک های جدید طرح که نشان می دهد بسیاری از پتانسیل ستون های CSS چندگانه است.

ستون های CSS چندین سال است که در حال حاضر وجود دارد، اما عدم پشتیبانی در مرورگرهای قدیمی (عمدتا نسخه های قدیمی اینترنت اکسپلورر)، بسیاری از متخصصان وب را از استفاده از این سبک ها در کار تولید خود حفظ کرده اند.

با پایان پشتیبانی از آن نسخه های قدیمی تر اینترنت اکسپلورر، برخی از طراحان وب اکنون با گزینه های طرح بندی جدید CSS، Columns CSS و همچنین یافتن آنها با این روش های جدید کنترل بیشتری نسبت به پوسته ها دارند.

مبانی ستون های CSS

همانطور که از نام آن مشخص است، Columns چندگانه CSS (همچنین به عنوان چند ستون CSS3 شناخته می شود) به شما امکان می دهد محتوا را به یک تعداد مجموعه ای از ستون تقسیم کنید. اساسی ترین ویژگی های CSS که شما استفاده می کنید عبارتند از:

برای شمارش ستون، تعداد ستون هایی که می خواهید مشخص می شود. شکاف ستون می تواند زاویه یا فاصله بین ستون ها باشد. مرورگر این مقادیر را میگیرد و محتوا را به صورت یکنواخت به تعداد ستونهایی که مشخص میکنید تقسیم میکند.

مثال معمولی از چند ستون CSS در عمل می تواند یک بلوک از محتوای متن را به چند ستون تقسیم کند، شبیه آنچه که در یک مقاله روزنامه دیده می شود. بگو، نشانه گذاری HTML زیر را داشته باشید (توجه داشته باشید که برای مثال اهداف، من فقط شروع یک پاراگراف را شروع می کنم، در حالی که در عمل ممکن است چند پاراگراف از محتوا در این نشانه گذاری وجود داشته باشد):

عنوان مقاله شما

تصور کنید که بسیاری از پاراگراف های متن اینجا ...

اگر بعدا این سبک CSS را نوشتید:

.content {-moz-column-count: 3؛ -webkit-column-count: 3؛ ستون تعداد: 3؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ ستون-فاصله: 30 پیکسل؛ }

این قانون CSS تقسیم "محتوا" را به 3 ستون برابر با تقسیم 30 پیکسل بین آنها تقسیم می کند. اگر شما به جای 3 از دو ستون خواستید، می توانید این مقدار را تغییر دهید و مرورگر عرض های جدیدی از این ستون ها را محاسبه می کند تا محتوای را به طور مساوی تقسیم کند. توجه داشته باشید که ما از اولویتهای پیشفرض فروشنده استفاده میکنیم و به دنبال آن، اعلامهای غیر از پیش تعریف شده است.

همانطور که آسان است، استفاده از آن در این راه برای استفاده از وب سایت مشکوک است. بله، شما می توانید یک دسته از محتوا را به چند ستون تقسیم کنید، اما این ممکن است بهترین تجربه خواندن برای وب نیست، به ویژه اگر ارتفاع این ستون ها زیر "برابر" صفحه نمایش می افتد.

خوانندگان پس از آن باید به بالا و پایین حرکت کنند تا محتوای کامل را بخوانند. با این حال، اصلی ستون های CSS به آسانی همانطور که در اینجا مشاهده می کنید، می توان آن را برای انجام خیلی بیشتر از تقسیم کردن محتوای بعضی از پاراگراف ها استفاده کرد - در واقع می توان از آن برای طرح استفاده کرد.

طرح بندی با ستون های CSS

بگو که شما دارای یک صفحه وب با محتوا است که دارای 3 ستون محتوا است. این یک طرح بندی وب سایت بسیار معمولی است و برای رسیدن به این 3 ستون، شما به طور معمول بخش هایی را که در آن هستند شناور می کنید. با چند ستون CSS، بسیار ساده تر است.

در اینجا چند نمونه از HTML وجود دارد:

آخرین اخبار

محتوا به اینجا می رود ...

از وبلاگ ما

محتوا به اینجا خواهد رفت ...

رویدادهای آینده

محتوا به اینجا بروید ...

CSS برای ایجاد این ستون های چندگانه با آنچه قبلا مشاهده کردید شروع می شود:

.content {-moz-column-count: 3؛ -webkit-column-count: 3؛ ستون تعداد: 3؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ ستون-فاصله: 30 پیکسل؛ }

اکنون چالش اینجاست که مرورگر می خواهد این محتوا را به صورت یکسان تقسیم کند، بنابراین اگر طول محتوای این تقسیم ها متفاوت باشد، مرورگر در واقع محتوای یک تقسیم بندی جداگانه را تقسیم می کند و شروع آن را به یک ستون اضافه می کند و سپس به یکی دیگر (شما می توانید این را با استفاده از این کد برای اجرای آزمایش ببینید و طول های مختلفی از محتوا را در داخل هر بخش اضافه کنید)!

این چیزی نیست که بخواهید. شما می خواهید هر یک از این بخش ها برای ایجاد یک ستون مجزا و بدون توجه به اینکه چه مقدار و یا یک محتوی تقسیم بندی یک فرد ممکن است، شما هرگز نمی خواهید آن را تقسیم کنید. شما می توانید این را با اضافه کردن این یک خط اضافی از CSS به دست آورید:

.content div {display: inline-block؛ }

این باعث می شود که بخش هایی که درون محتوا قرار دارند، باقی بمانند حتی اگر مرورگر این را به چند ستون تقسیم کند. حتی بهتر از آنجایی که ما هیچ چیزی در اینجا با عرض ثابت ثابت نکردیم، این ستونها به صورت تغییر اندازه مرورگر به صورت خودکار تغییر می کند، و آنها را یک برنامه ایده آل برای وب سایت های پاسخگو می سازد . با استفاده از این سبک inline-block، هر سه بخش شما یک ستون مجزا از محتوا خواهد بود.

با استفاده از ستون-عرض

در کنار "ستون شمارش" که می توانید از آن استفاده کنید، یک ملک دیگر وجود دارد و بسته به نیازهای طرح شما، ممکن است انتخاب مناسبتری برای سایت شما باشد. این "ستون عرض" است. با استفاده از همان نشانه گذاری HTML همانطور که قبلا نشان داده شد، می توانیم این کار را با CSS انجام دهیم:

.content {-moz-column-width: 500px؛ -webkit-column-width: 500px؛ ستون-عرض: 500 پیکسل؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ ستون-فاصله: 30 پیکسل؛ } .content div {display: inline-block؛ }

راه کار این کار این است که مرورگر با استفاده از این "ستون عرض" به عنوان حداکثر مقدار آن ستون. بنابراین اگر پنجره مرورگر کمتر از 500 پیکسل عرض باشد، این 3 بخش در یک ستون به نظر می رسد، یکی از دو تاپیک دیگری است. این طرح معمولی است که برای طرح بندی صفحه نمایش تلفن همراه / کوچک استفاده می شود.

همانطور که عرض مرورگر به اندازه کافی بزرگ است تا متناسب با 2 ستون همراه با شکاف ستون مشخص شده، مرورگر به طور خودکار از یک ستون ستون به دو ستون حرکت می کند. عرض صفحه را افزایش دهید و در نهایت، شما یک طرح 3 ستون را دریافت خواهید کرد، با هر یک از 3 بخش ما در ستون خود نمایش داده می شود. باز هم، این یک راه عالی برای دریافت برخی از طرح های پاسخگو، چند منظوره دوستانه است ، و شما حتی نیاز به استفاده از پرس و جو رسانه ها برای تغییر سبک طرح!

سایر خواص ستون

علاوه بر خواصی که در اینجا نیز وجود دارد، ویژگی های "rule-column"، از جمله رنگ، سبک، و مقادیر عرض وجود دارد که به شما امکان ایجاد قوانین بین ستون های شما را می دهد. اگر می خواهید برخی از خطوط جداگانه ستون خود را به جای مرزها استفاده کنید، آنها می توانند به جای مرزها استفاده شوند.

زمان آزمایش

در حال حاضر CSS چند ستون ستون به خوبی پشتیبانی می شود. با استفاده از پیشوندها، بیش از 94 درصد از کاربران وب قادر به دیدن این سبک ها هستند و این گروه پشتیبانی نشده واقعا نسخه های بسیار قدیمی اینترنت اکسپلورر هستند که ممکن است دیگر به هیچ وجه پشتیبانی نشوند.

با این سطح پشتیبانی در حال حاضر در محل، هیچ دلیلی وجود دارد که شروع به آزمایش با ستون های CSS و استفاده از این سبک ها در وب سایت های تولید آماده نیست. شما می توانید آزمایشات خود را با استفاده از HTML و CSS ارائه شده در این مقاله شروع کنید و با مقادیر مختلف بازی کنید تا ببینید چه چیزی بهتر است برای نیازهای طرح سایت شما.