cssطراحی سایت

جلسه ۶۴: اصطلاحات اساسی CSS Grid که باید بدانید در CSS

اصطلاحات اساسی CSS Grid که باید بدانید

بیایید نگاهی به اصطلاحات CSS Grid بیندازیم.

Grid Container چیست؟

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

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

اگر از نرم افزارهای طراحی مانند Adobe Photoshop یا Sketch استفاده کنید ، با این کار آشنا خواهید شد.

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

Grid Line چیست؟

کمی فرض کنید که شما یک شبکه کاملاً مشخص مانند این دارید:

طرح شامل یک ظرف شبکه با تعدادی از وسایل شبکه به خوبی چیده شده (عناصر کودک درون شبکه) است

خطوط شبکه خطوط افقی و عمودی هستند که شبکه را تقسیم می کنند.

Grid Cell چیست؟

سلول شبکه کوچکترین واحد مساحت در طرح شبکه است. هر فضایی است که توسط چهار خط شبکه محدود شده باشد.

Grid Area

یک Grid Area ممکن است به اندازه منطقه موجود در یک سلول شبکه کوچک باشد (در بالا نشان داده شده است). همچنین ممکن است به اندازه تمام سلولهای داخل شبکه باشد. در تصویر زیر ، منطقه تحت پوشش چهار سلول یک Grid Area است.

Grid Track چیست

من تعاریف خیلی فنی را دوست ندارم. بنابراین ، یک grid track ممکن است به عنوان یک نام جذاب برای ستون ها و (یا) ردیف ها دیده شود. این فاصله بین هر دو خط شبکه است.

تصاویر زیر نمونه ای از آهنگ های شبکه را نشان می دهد.

بنابراین ، ما اولین قطعه از پازل CSS grid را مرتب کرده ایم.

بیایید حرکت کنیم

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا