آموزش کامل ماژول Grid Layout در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل ماژول Grid Layout در CSS با من همراه باشید.

آموزش کامل ماژول Grid Layout در CSS

Free-Learn

آموزش کامل ماژول Grid Layout در CSS

این ماژول ( یا سیستم طرح بندی یا چیدمان ) که در لغت میشه ( ماژول چیدمان شبکه ای ) نیز همانند FlexBox یک سیستم برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد.

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

پس در کل بدونید ویژگی هایی که برای طرح بندی ( Layout ) ایجاد شده اند ، هدف اصلیشون اینه که ما بتونیم عناصر ( یا تگ ها ) را در یک صفحه ی وب به بهترین و راحت ترین حالت ممکن ایجاد نماییم.

اگر فری لرن رو دنبال کرده باشید، میدونید که در بخش آموزش CSS پیشرفته ، بنده سیستم یا ماژول فلکس باکس ( FlexBox ) رو بطور کامل آموزش دادم که در صورت تمایل میتوانید از طریق لینک زیر این آموزش را نیز مشاهده نمایید.

برای مشاهده آموزش کامل ماژول فلکس باکس یا FlexBox کلیک نمایید.

Free-Learn

تعریف حالت نمایش Grid

خب همونطور که در آموزش FlexBox هم خواندیم ، ما باید اول از هرچیزی یک باکس یا یک ظرف یا ( معمولا بهش میگن کانتینر Container ) رو با حالت نمایش grid ایجاد نماییم.

یعنی برای یک ظرف FlexBox ما باید حالت نمایش ظرف رو، روی flex تنظیم کنیم و برای ظرف Grid باید حالت نمایش رو، روی grid تنظیم نماییم.

حتما و ضروری است که حالت نمایش ظرف grid باشد در غیراینصورت هیچ عملی بروی آیتم ها انجام نخواهد شد.

بعد از اون دیگه هرچیزی بزاریم داخل این ظرف عملا میشه آیتم ها یا مثلا فرزندان این ظرف که دیگه با استفاده از یکسری ویژگی های CSS که در ادامه باهاشون آشنا خواهید شد میتونیم روی آیتم های ظرف کار کنیم.

پس در اولین مرحله ما باید یک ظرف با حالت نمایش grid ایجاد نماییم :

Free-Learn

ایجاد آیتم های ظرف Grid

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

پس ما میتونیم یک ظرف و آیتم های آن را بصورت زیر تعریف نماییم :

Free-Learn

کار با ویژگی Grid-Template-Columns

خب در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با اولین ویژگی ای ( Grid-Template-Columns ) که درون ظرف Grid مورد استفاده قرار میگیرد آشنا شویم و باهاش کار کنیم ، با استفاده از این ویژگی میتوان تعداد ستون های شبکه Grid مون رو مشخص کرد.

این ویژگی فقط بروی ظرف Grid عمل میکند نه بروی آیتم های ظرف

اگر تعداد آیتم ها از تعداد ستون ها بیشتر باشد، آیتم های اضافه بصورت خودکار به ظرف اضافه خواهند شد

مثال شماره ۱ : ایجاد ۴ ستون از آیتم ها و استفاده از مقدار auto برای تعیین اندازه هر ستون ( auto یعنی بصورت خودکار مرورگر خودش اندازه هارو مشخص میکنه )

امتحان کنید

مثال شماره ۲ : تعیین اندازه هر ستون با استفاده از واحد اندازه گیری پیکسل ( PX )

امتحان کنید

Free-Learn

کار با ویژگی Grid-Template-Rows

خب ویژگی بالا که تعداد ستون هارو مشخص میکرد و الان با استفاده از این ویژگی ( Grid-Template-Rows ) میتوان تعداد سطرهای ظرف شبکه Grid مون رو مشخص نماییم.

مثال شماره ۱ : تعیین اندازه سطرها با استفاده از واحد اندازه گیری پیکسل ( PX )

همونطور که در مثال زیر مشاهده مینمایید من با استفاده از ویژگی Grid-Template-Rows اندازه سطر اول رو ۶۰ پیکسل و اندازه سطر دوم رو ۱۰۰ پیکسل و در نهایت اندازه سطر سوم از آیتم هارو ۲۰۰ پیکسل قرار دادم.

امتحان کنید

Free-Learn

کار با ویژگی Grid-Column-Gap

با استفاده از این ویژگی میتوان یک فضای خالی ( فاصله ) را در بین ستون های موجود در یک ظرف تعریف و یا ایجاد کرد.

آموزش کامل ماژول Grid Layout در CSS

امتحان کنید

Free-Learn

کار با ویژگی Grid-Row-Gap

با استفاده از این ویژگی هم میتوان یک فضای خالی ( فاصله ) را در بین سطرهای موجود در یک ظرف تعریف و یا ایجاد کرد.

امتحان کنید

Free-Learn

کار با ویژگی Grid-Gap

با استفاده از این ویژگی میتوان ۲ ویژگی grid-column-gap و grid-row-gap را بصورت خلاصه نوشت.

مثال شماره ۱ : استفاده از ۲ مقدار ( مقدار اول برای فاصله بین ستون ها و مقدار دوم برای فاصله بین سطرها )

امتحان کنید

مثال شماره ۲ : استفاده از ۱ مقدار ( یک مقدار هم برای فاصله بین ستون ها و هم سطرها اعمال میشود )

امتحان کنید

Free-Learn

کار با ویژگی Justify-Content

با استفاده از این ویژگی نیز میتوان موقعیت قرار گیری یا تراز آیتم های ظرف را بصورت افقی مشخص کرد.

مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )

امتحان کنید

مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف )

امتحان کنید

مثال شماره ۳ : استفاده از مقدار start ( قرار گرفتن آیتم ها در قسمت ابتدایی یا شروع ظرف )

امتحان کنید

مثال شماره ۴ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )

امتحان کنید

Free-Learn

کار با ویژگی Align-Content

در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با ویژگی align-content آشنا شویم، اگه آموزش فلکس باکس رو مشاهده کرده باشید میدونید که با ویژگی align-content در اونجاهم کار کردیم.

همانطور که از اسم این ویژگی مشخصه ، با استفاده از آن میتوان تراز آیتم های موجود در ظرف یا همون Container را بصورت عمودی مشخص کرد.

برای مشاهده عملکرد این ویژگی ، لطفا با استفاده از ویژگی height اندازه ارتفاع برای ظرف مشخص نمایید.

مثال شماره ۱ : استفاده از مقدار space-around ( ایجاد یک فضای خالی بصورت مساوی بین آیتم ها )

امتحان کنید

مثال شماره ۲ : استفاده از مقدار center ( قرار دادن آیتم ها در وسط ظرف بصورت عمودی )

امتحان کنید

مثال شماره ۳ : استفاده از مقدار end ( قرار گرفتن آیتم ها در قسمت پایانی ظرف )

امتحان کنید

Free-Learn

کار با ویژگی Grid-Column-Start

با استفاده از این ویژگی میتوان مشخص کرد که یک آیتم از کدام ستون / لاین شروع شود. مثلا اگه بگیم آیتم شماره ۱ از ستون شماره ۳ شروع شه خب اون آیتم در ظرف از ستون شماره ۳ شروع میشود. ( لطفا به مثال توجه نمایید )

آموزش کامل ماژول Grid Layout در CSS

مثال : شروع شدن آیتم شماره ۱ از ستون شماره ۳

امتحان کنید

مثال شماره ۲ : شروع شدن آیتم شماره ۱ و ادغام کردن ۳ ستون باهم

امتحان کنید

Free-Learn

کار با ویژگی Grid-Column-End

خب ویژگی قبلی که دیدیم ستون شروع شدن یک آیتم رو مشخص میکرد، حال با استفاده از ویژگی grid-column-end میتوان مشخص کردن که خط یا ستون پایان یک آیتم کجا باشد.

آموزش کامل ماژول Grid Layout در CSS

مثال شماره ۱ :

امتحان کنید

Free-Learn

کار با ویژگی Grid-Row-Start

این ویژگی هم دقیقا همون Grid-Column-Start می باشد فقط با این تفاوت که این ویژگی بروی سطرهای ظرف کار میکند.

آموزش کامل ماژول Grid Layout در CSS

مثال شماره ۱ : شروع شدن آیتم شماره ۱ از سطر شماره ۲

امتحان کنید

مثال شماره ۲ : ادغام آیتم شماره ۱ تا سطر ۴

امتحان کنید

Free-Learn

کار با ویژگی Grid-Row-End

اینم که دیگه مشخصه، با استفاده از این ویژگی میتوان سطر پایان دهنده یک آیتم رو مشخص کرد.

آموزش کامل ماژول Grid Layout در CSS

مثال شماره ۱ : قرار گیری آیتم شماره ۱ قبل از سطر شماره ۴

امتحان کنید

Free-Learn

کار با ویژگی Grid-Area و Grid-Template-Areas

در ادامه ی آموزش ماژول Grid Layout در CSS میخوایم با ویژگی grid-area آشنا شویم و ببینیم این ویژگی برای چه کاری مورد استفاده قرار میگیرد.

این ویژگی برای خلاصه نویسی ویژگی های grid-row-start و grid-column-start و grid-row-end و grid-column-end می باشد، حال علاوه بر این ، ما میتوانیم با استفاده از این ویژگی یک نام را برای آیتم های موجود در Grid تعریف نماییم.

در واقع با استفاده از ویژگی Grid-Area میتوان یک نام را برای آیتم های گرید ( Grid ) مشخص و یا تعریف کرد ، سپس میتوان همین نام تعریف شده را به ویژگی Grid-Template-Areas برای تعریف ستون های Grid متصل کرد.

برای تعریف سطرها باید نام آیتم ها را درون تک کوتیشن ‘ ‘ گذاشت.

برای تعریف ستون ها باید در بین هر یک از نام آیتم ها ( ۱ عدد ) فاصله گذاشت.

مثال شماره ۱ : تعریف نام برای آیتم شماره ۱ و استفاده از نام تعریف شده برای مشخص کردن ستون های گرید

امتحان کنید

مثال شماره ۲ : ایجاد ۴ ستون از نام های تعریف شده برای آیتم ها

امتحان کنید

مثال شماره ۳ : طرح بندی یک قالب ساده بر پایه Grid ( دارای هدر – ستون سمت راست – بدنه اصلی – ستون سمت چپ و فوتر )

امتحان کنید

مثال شماره ۴ : واکنش گرایی مثال شماره ۳ ( یعنی اگه بروی گوشی های موبایل یا درکل بروی دستگاهایی که عرض صفحه نمایششون کمتر از ۵۰۰ پیکسل بود، چیدمان Grid ما به نسبت صفحه نمایش تغییر کند )

در مثال زیر با توجه به سلیقه خودم نحوه چیدمان آیتم ها را در گوشی موبایل نیز تغییر دادم، مثلا بدنه اصلی را بعد از هدر قرار دادم و…

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


امتحان کنید

Free-Learn

خب دوستان خسته نباشید به پایان آموزش ماژول Grid Layout در CSS رسیدیم، امیدوارم که مشکل خاصی در این بخش از آموزش نداشته باشید، ولی خب اگه باز مشکلی سوالی چیزی دارید حتما در قسمت پرسش و پاسخ همین مطلب ، پرسش تان را ارسال نمایید.

لازم به ذکره که در این جلسه سعی کردم تا حدودی بصورت کامل ( ولی نه با جزئیات تمام ) ماژول گرید ( Grid ) رو آموزش بدم ، لذا برای یادگیری کامل و با جزئیات ماژول Grid ، حتما از بخش آموزش ویژگی های CSS ، ویژگی های مرتبط با گرید را بصورت تک به تک و با جزئیات مشاهده / مطالعه نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب