چه زمانی از ستون های CSS استفاده می کنید؟

این لفاظی نیست: من واقعاً علاقه مند به یافتن موارد استفاده عالی برای طرح‌بندی‌های چند ستونی CSS هستم.

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

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

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

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

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

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

ادامه دهید و اندازه عرض ویوپورت را تغییر دهید. سه ستون تعریف شده است اما تعداد آنها بر اساس مقدار فضای موجود تغییر می کند. باید آن همه خوبی پاسخگو را بدون کار پرس و جو رسانه ای دوست داشت!

داشتم روی یک نسخه ی نمایشی کار می کردم :left شبه کلاس و دست یافت columns زیرا این یک راه عالی برای تکه تکه کردن چیزها برای چاپ دموها است. بنابراین، حدس می‌زنم مورد استفاده دیگری نیز وجود داشته باشد. و در حین ساخت دمو، متوجه شدم که می توان از طرح چند ستونی برای ایجاد یک شبکه سنگ تراشی از آیتم ها مانند یک گالری تصاویر استفاده کرد:

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