CSS subgrid ویژگی جدید CSS که اکنون می توانید آزمایش کنید

  • شروع کننده موضوع ahmad
  • تاریخ شروع
قبل از اینکه مرورگرها به تدریج شروع به پیاده سازی کنند ، ویژگی های CSS ابتدا در مشخصات کنسرسیوم W3 - معمولاً پس از بحث های طولانی ، تعریف می شوند. ویژگی های جدید CSS بی شماری وجود دارد که قابل ذکر است ،


1. CSS subgrid​


یک ویژگی اضافی به CSS Grid است که در سطح 2 از مشخصات معرفی شده است و به شبکه های تو در تو امکان می دهد در اندازه گیری شبکه های اصلی خود شرکت کنند.


CSS Grid یک ماژول طرح انعطاف پذیر است که به توسعه دهندگان اجازه می دهد بدون استفاده از JavaScript یا استفاده از هک های نامرتب CSS ، طرح بندی پیچیده ای ایجاد کنند.
برای اعمال طرح بندی شبکه روی یک عنصر HTML ، قانون زیر را به آن اضافه کنید.


CSS:
 .grid-container {
    display: grid;
}


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

به عنوان مثال ، در مثال بالا ، عناصر اصلی .grid-container موارد شبکه خواهند بود و طبق قوانینی که شما با ویژگی های grid-template-column و grid-template-rows تعریف می کنید ، ترسیم می شوند:


CSS:
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 70vh 50px;
}


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


CSS:
.grid-item {
    /* these rules specify the subgrid's position within the layout */
    grid-column: 2 / 4;      /* two columns vertically */
    grid-row: 1 / 3;         /* two rows horizontally */

    /* these rules belong to the subgrid itself */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}


ویژگی های ستون شبکه و ردیف شبکه موقعیت مورد شبکه را در ستون ها یا ردیف های شبکه تعریف می کنند. عناصر اصلی .grid-item زیر شبکه را تشکیل می دهند. یک مورد شبکه می تواند بیش از یک سلول شبکه را پوشش دهد. به عنوان مثال ، در اینجا در چهار سلول گسترش می یابد (مقادیر شبکه ستون و شبکه ردیف در مثال بالا اختیاری است).

همانطور که می بینید ، زیر شبکه یک ویژگی مستقل CSS نیست ، بلکه مقداری است که می توانید به خصوصیات grid-template-columns و grid-template-rows اضافه کنید. این امر باعث می شود تا فرزندان مورد .grid در طرح شبکه قرار گیرند:

subgrid
همانطور که می بینید ، زیر شبکه به بخشی از طرح شبکه تبدیل شده است و دقیقاً در مکانی قرار گرفته است که می خواهیم (بین خطوط شبکه عمودی دوم و چهارم و خطوط شبکه افقی اول و سوم).

بقیه موارد شبکه جریان عادی شبکه را حفظ کرده اند و ردیف چهارم نیز در پایین طرح ظاهر شده است. با این حال ، از آنجا که ما فقط سه ردیف را با ویژگی grid-template-rows تعریف کردیم ، ردیف چهارم مقدار از پیش تعیین شده ای ندارد ، بنابراین فقط ارتفاع طبیعی محتوای آن را می گیرد. اگر بخواهیم متن را از سه مورد شبکه آخر حذف کنیم ، آنها حتی نشان داده نمی شوند زیرا ارتفاع طبیعی آنها 0 است.

پشتیبانی از مرورگر

مشخصات زیر شبکه CSS از اوت سال 2020 یک پیشنهاد کاندیدای W3C است. در حال حاضر ، این برنامه فقط توسط Firefox 71+ پشتیبانی می شود ، اما همچنین به Chromium ، مرورگر وب منبع باز که به عنوان پایه و اساس مرورگرهای اصلی از جمله Chrome ، Opera , Brave ، و مایکروسافت اج جدید استفاده می شود.
 
آخرین ویرایش:
بالا