دستور grid-template-columns در css

دستور grid-template-columns در css

دستور grid-template-columns تعداد ستون ها و اندازه عرض هر ستون رو در سیستم grid تعریف می کنه.

شکل کلی این دستور به این صورته:

علامت های | به معنی “یا” است. یعنی میتونیم از هریک از این عبارت ها استفاده کنیم. در زیر به توضیح تک تک آنها پرداخته ایم.

توجه: در این مقاله از روش استایل دهی خارجی استفاده نموده ایم. شما می توانید به صورت داخلی نیز استایل بدین.

اگه اطلاعاتی درمورد روش های استایل دهی ندارین، به مقالات زیر مراجعه کنین:

  1. تگ style در HTML
  2. آموزش صفر تا صد HTML 

length در دستور grid-template-columns

هنگام استفاده از این کلمه نمی تونیم بنویسیم length. بلکه باید از اعداد و واحد های اندازه گیری همچون پیکسل و درصد و … استفاده کتیم.

با استفاده از این کلمه می تونیم عرض ستون ها رو به صورت دقیق مشخص کنیم.

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

استفاده از واحد پیکسل برای length

به مثال زیر دقت کنین. فایل html:

فایل css:

با دستور grid-template-columns سه ستون ایجاد کرده و عرضشون رو هم تعیین نمودیم.

دستور gap هم که میزان فاصله سلول ها از هم رو تعیین میکنه. و نتیجه در مرورگر :

استفاده از px در دستور grid-template-columns

همانگونه که مشاهده می کنین، 3 ستون ایجاد شد که از سمت چپ، عرض اولین ستون به مقدار 100px و دومی 200px و آخری 500px هستش.

استفاده از واحد fr برای length

فرض کنید می خواهیم یک grid با 3 ستون داشته باشیم. برای این منظور باید از :

ابتدا div با کلاس grid رو به عنوان یک سیستم گرید معرفی کرده و بعد تعداد ستون های اون و میزان عرض هر ستون رو تعیین می کنیم:

نتیجه در مرورگر:

دستور grid-template-columns در css و ایجاد 3 ستون با استفاده از fr

همانطور که مشاهده می کنین با استفاده از دستور grid-template-columns اقدام به ایجاد 3 ستون با عرض مساوی نمودیم.

حتی می توانیم از واحد fr استفاده کرده و ستون ها رو هم اندازه نکنیم:

استفاده از درصد برای length

در دستور grid-template-columns یکی دیگر از واحد هایی که میتونیم استفاده کنیم، درصد هستش. و عددی که به اون میدیم همان درصدی از عرض صفحه می باشد.

auto در دستور grid-template-columns

استفاده از این عبارت باعث میشه که ترک، فضای باقیمانده در محور افقی رو به خودش اختصاص بده. به مثال زیر دقت کنین:

فایل html:

و فایل css:

کاری که کردیم این بود که با استفاده از دستور grid-template-columns در سی اس اس 3 ستون تعریف نمودیم.

عرض ستون اول رو برابر 15% قرار دادیم.

عرض ستون دوم را برابر 500px قرار دادیم اما عرض ستون سوم رو برابر با auto انتخاب کردیم. و اما در مرورگر:

استفاده از مقدار auto در دستور grid-template-columns در css

مشاهده می کنین ستون سوم، بقیه فضای باقیمانده در محور افقی رو به خودش اختصاص داده.

اگه در هر 3 ستون از مقدار auto استفاده می کردیم، چی می شد؟

فضای افقی موجود رو بین 3 ستون تقسیم می کرد.

به عبارتی هر سه ستون عرض مساوی پیدا می کردن. باور نمی کنین؟

بفرمایین:

و خروجی در مرورگر:

استفاده از مقدار auto برای همه ستون ها در دستور grid-template-columns در css

()minmax در دستور grid-template-columns

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

به عبارتی می تونیم بگیم که هر ترک، کمترین مقدار و بیشترین مقدارش چقدر باشد.

ساده تر بگم می تونیم تعیین کنیم که هر ترک چقدر میتونه کشیده بشه.

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

در این مثال با دستور grid-template-columns اقدام به تعریف 3 ستون نمودیم.

در ستون اول از مقدار minmax استفاده کردیم و اعلام نمودیم که کمترین عرض این ستون باید 100px باشه.

اما بیشترین مقدارش رو هم برابر با 250px قرار دادیم.

به عبارتی این ترک بیشتر از 250px عرض نخواهد داشت.

استفاده از auto در ()minmax

استفاده از auto در داخل minmax به معنای عرض برابر با عرض محتوای داخل المان است.

در این مثال با دستور grid-template-columns اقدام به تعریف 3 ستون نمودیم.

در ستون اول از مقدار minmax استفاده کردیم و اعلام نمودیم که کمترین عرض این ستون باید به مقدار محتوای داخل المان های قرار گیرنده در این ستون باشه.

اما بیشترین مقدارش رو هم برابر با 50% قرار دادیم.

به عبارتی این ترک بیشتر از 50% عرض نخواهد داشت.

min-content در دستور grid-template-columns

استفاده از این عبارت باعث میشه ترک مورد نظر کمترین عرض رو بگیره تا محتوای داخلش هم سرریز نشه.

به مثال زیر خوب دقت کنین:

فایل html:

کد css:

و خروجی در مرورگر:

استفاده از min-content در دستور grid-template-columns در css

max-content در دستور grid-template-columns

استفاده از این عبارت باعث میشه ترک کمترین عرض ممکن رو بگیره اما محتوای داخل سلول های این ستون، کاملا کیپ و متناسب با محتوای داخلش باشه.

در مثال زیر ترکیبی از دستورات min-content و max-content و تفاوت اونا کد های html مثال قبل نمایش داده میشه:

و نتیجه :

تفاوت min-content و max-content در دستور grid-template-columns در css

()fit-content در دستور grid-template-columns

تابع fit-content یک عدد به عنوان ماکزیمم عرض ترک قبول می کند.

این تابع همان دستور minmax است که مینیمم آن مقدار auto و ماکزیمم آن عددی است که به تابع میدیم.

به مثال زیر توجه کنین:

و نتیجه:

fit-content در دستور grid-template-columns در css

مشاهده می کنین که هر دو ستون عرضی برابر دارند.

استفاده از repeat در دستور grid-template-columns

فرض کنید می خواهیم در یک سیستم گرید بندی شده، 12 ستون هم اندازه ایجاد کنیم:

همونطور که مشاهده می کنین مجبوریم 12 بار عبارت 1fr رو تایپ کنیم. اما استفاده از تابع repeat کار رو آسان تر خواهد کرد:

تابع repeat دو ورودی می گیرد. اولین ورودی تعداد تکرار و دومین ورودی برابر مقدار عرض ستون هاست.

استفاده از auto-fill و auto-fit در دستور grid-template-columns

فرض کنید بخواهیم در یک گرید، تعدادی ستون تعریف کنیم که حداقل مقدار عرضشان 100px باشد. اما تعداد ستون ها را نمی دانیم.

به عبارتی تعداد ستون ها به المان های داخل گرید بستگی خواهد داشت.

اما میدونیم که در دستور grid-template-columns باید تعداد ستون ها رو نیز بدونیم. پس چکار میشه کرد؟

می توانیم از دستور auto-fill و auto-fit استفاده کنیم:

و خروجی مرورگر:

استفاده از auto-fill و auto-fit در دستور grid-template-columns در css

سلول های ردیف اول با دستور auto-fill ساخته شدن و سلول های ردیف دوم با auto-fit.

تفاوت auto-fit و auto-fill

همانگونه که مشاهده می کنین auto-fit بر خلاف auto-fill، کل ترک افقی رو بین سلول ها تقسیم میکنه. اما auto-fill برای هر سلول مقدار مینیمم رو برمبداره.

نام گذاری ستون ها

در دستور grid-template-columns همزمان میتونیم هم تعداد و عرض ستون ها رو تعیین نماییم و هم برای خط های ستون ها نام انتخاب کنیم.

این نام گذاری داخل علامت کروشه [] انجام میگیره:

در انتخاب اسم های خطوط آزادیم. میتونیم هر اسمی رو بدیم.

حتی میتونیم برای یک خط دو نام تعیین کنیم:

در مقالات بعدی، فواید نامگذاری خطوط رو کامل توضیح خواهیم داد.

منابع:

  1. https://www.w3schools.com/cssref/pr_grid-template-columns.asp
  2. https://css-tricks.com/snippets/css/complete-guide-grid/
  3. https://medium.com/@elad/becoming-a-css-grid-ninja-f4c6db018cc1
مطالب زیر را حتما بخوانید

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

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

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.