چگونه می توانم یک طرح بندی شبکه ای در CSS ایجاد کنم؟

2024 نویسنده: Lynn Donovan | [email protected]. آخرین اصلاح شده: 2024-01-18 08:23

بیایید چهار مرحله ضروری را دوباره مرور کنیم:

1. ایجاد کردن یک عنصر ظرف، و اعلام کنید که نمایش داده شود: توری ;.
2. از همان ظرف برای تعریف استفاده کنید توری آهنگ با استفاده از توری - قالب -ستون ها و توری - قالب ویژگی های ردیف
3. عناصر کودک را در ظرف قرار دهید.
4. اندازه های ناودان را با استفاده از توری ویژگی های شکاف

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

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

علاوه بر این، باید از Flexbox یا Grid استفاده کنم؟ هر دو فلکس باکس و توری مبتنی بر این مفهوم هستند. فلکس باکس برای چیدمان عناصر در یک سطر یا یک ستون بهترین است. توری برای مرتب کردن عناصر در چندین ردیف و ستون بهترین است. ویژگی justify-content تعیین می کند که چگونه فضای اضافی از خم شدن -کانتینر به خم شدن -موارد.

به همین ترتیب، 1fr چیست؟

1fr یک "واحد کسری" است که راهی برای گفتن "فضای باقی مانده در عنصر" است.

شبکه فلکس باکس چیست؟

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