حالا که اصطلاحات اساسی را فهمیدید ، مثل یک بچه ماجراجو ، بگذارید لگد بزنیم!
چگونه شبکه را تعریف می کنید؟
درست مثل 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
}
ما در حال حرکت هستیم. در درس بعدی می بینیم
