منتشر شده: ۱۴ ژانویه ۲۰۲۶
از کروم ۱۴۵، ویژگیهای column-wrap و column-height از مشخصات سطح دو طرحبندی چند ستونی پشتیبانی میشوند. این ویژگیها به شما امکان میدهند ستونها را در جهت بلوک، در یک ردیف جدید قرار دهید.
قبل از کروم ۱۴۵، اگر ارتفاع کانتینر چندستونی محدود میشد، محتوایی که در فضای موجود جا نمیشد، به صورت ستونهای سرریز در جهت درونخطی ظاهر میشد. این باعث ایجاد یک نوار پیمایش افقی در وب میشد.
با استفاده از ویژگیهای column-height و column-wrap میتوانید ارتفاع ردیف ستونها را تنظیم کنید و ستونهای سرریز را طوری تنظیم کنید که به عنوان یک ردیف جدید ظاهر شوند.
امکان ایجاد ردیفهای جدید ستون، مسیری را برای عبور از وضعیت فعلی فراهم میکند، جایی که شما بین این دو انتخاب دارید: وادار کردن افراد به بالا و پایین رفتن برای خواندن ستونها، یا ریسک استفاده از نوار پیمایش افقی در موقعیتهایی که مقدار غیرقابل پیشبینی از محتوا وجود دارد.
همچنین الگوهایی مانند چرخ فلک جهت بلوک را فعال میکند، که در آن ستونهایی ایجاد میشوند که ارتفاع نمای موجود را پر میکنند. برای خواندن ردیف بعدی ستونها، در جهت بلوک به صفحه بعدی بروید.
یک تجربه خواندن واضح ایجاد کنید
با وجود چندین ردیف ستون، میتوان یک تجربه خواندن نامشخص ایجاد کرد، به طوری که برای خواننده مشخص نباشد که چندین ردیف وجود دارد و آنها از روی فاصله رد میشوند تا به خواندن ستون ادامه دهند. این چیزی است که باید در طراحی رابط کاربری شما در نظر گرفته شود. قابلیت جدید اضافه کردن تزئینات در فاصله بین ردیفها، ابزاری اضافی برای ایجاد این تمایز بصری در اختیار شما قرار میدهد.
قوانین ردیف به زودی اعمال میشود
مشخصات سطح ۱ چندستونی شامل ویژگیهایی برای استایلدهی به یک قانون ستونی است؛ این قانون در فاصله بین ستونها قرار میگیرد. ویژگیهایی برای استایلدهی به قوانین ردیف در مشخصات جدید CSS Gap Decorations گنجانده شده است که در حال حاضر در مرحله آزمایشی توسعهدهندگان است. پس از پایدار شدن این مشخصات، میتوانید قوانین ردیف و ستون را در grid، flexbox و چندستونی اضافه کنید.