cssطراحی سایت

جلسه ۶۵: CSS Grid ، مراحل کوچک در CSS

CSS Grid ، مراحل کوچک

حالا که اصطلاحات اساسی را فهمیدید ، مثل یک بچه ماجراجو ، بگذارید لگد بزنیم!
چگونه شبکه را تعریف می کنید؟

درست مثل Flexbox ، همه چیز با یک خط آغاز می شود. display: grid یا display: inline-grid برای یک نسخه داخلی.

به عنوان مثال ، برای ایجاد یک div خاص به یک ظرف grid ، این کار را انجام دهید:

div {
display: grid;
}

چگونه ستون ها و ردیف ها را ایجاد می کنید؟

شبکه ای بدون ستون و ردیف کاملاً بی معنی است.

برای ایجاد ستون ها و ردیف ها در یک ظرف شبکه ، از دو ویژگی CSS جدید استفاده می کنید: grid-template-columns و grid-template-rows.

بنابراین چگونه از اینها استفاده می کنید؟ خیلی ساده.

grid-template-colum ها محل قرارگیری ستون ها را تعریف می کند در حالی که grid-template-rows محل قرارگیری ردیف ها را در ظرف grid تعریف می کند.

چگونه واقعاً کار می کند ، این است که شما مقادیر طول را به این خصوصیات می دهید و آنها ردیف ها و ستون هایی را درgrid container ایجاد می کنند.

به یک مثال زیر نگاه کنید:

grid-template-columns: ۱۰۰px ۲۰۰px ۳۰۰px

با این کار ۳ ستون جدید درgrid container ایجاد می شود. اولی با طول ۱۰۰ پیکسل ، دیگری ۲۰۰ پیکسل و دیگری ۳۰۰ پیکسل.

grid-template-rows: ۱۰۰px ۲۰۰px ۳۰۰px

با این کار ۳ ردیف جدید در ظرف شبکه ایجاد می شود. موارد ذکر شده در زیر نشان داده شده است

اکنون اینها را کنار هم قرار دهید ، و یک grid کامل – با سطرها و ستون مشخص شده – دریافت خواهید کرد.

.grid-container {
display: grid;
grid-template-columns: ۱۰۰px ۲۰۰px ۳۰۰px
grid-template-rows: ۱۰۰px ۲۰۰px ۳۰۰px
}

ما در حال حرکت هستیم. در درس بعدی می بینیم

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

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

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

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