مجموعه آموزشی پی استور - https://programstore.ir

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

دستور grid-template-columns

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

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

none|auto|max-content|min-content|length|initial|inherit;

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

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

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

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

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

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

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

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

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

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

<div class="grid">

        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

</div>

فایل css

.grid {
    display: grid;
    grid-template-columns: 100px 200px 500px;
    gap: 2rem;
}

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

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

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

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

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

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

<div class="grid">

        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

</div>

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

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    gap: 2rem;
}

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

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

.grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    gap: 2rem;
}

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

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

فایل html:

 <div class="grid">

        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>

</div>

و فایل css:

.grid {
    display: grid;
    grid-template-columns: 15% 500px auto;
    gap: 2rem;
}

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

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

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

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

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

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

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

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

بفرمایین:

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 2rem;
}

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

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

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

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: minmax(100px, 250px) 1fr 3em;
    gap: 2rem;
}

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

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

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: minmax(auto, 50%) 1fr 3em;
    gap: 2rem;
}

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

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

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

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

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

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

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

فایل html:

<div class="grid">

        <div class="item item1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis, similique!</div>
        <div class="item item2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, vitae.</div>
        <div class="item item3">item3</div>

</div>

کد css:

.grid {
    display: grid;
    grid-template-columns: min-content min-content auto;
    gap: 2rem;
}

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

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: min-content max-content auto;
    gap: 2rem;
}

و نتیجه :

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

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: fit-content(200px) minmax(auto, 200px);
    gap: 2rem;
}

و نتیجه:

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

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

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

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

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

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

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

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

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

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

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

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

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

.auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

.auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
}

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

استفاده از 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 همزمان میتونیم هم تعداد و عرض ستون ها رو تعیین نماییم و هم برای خط های ستون ها نام انتخاب کنیم.

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

.grid {
    display: grid;
    grid-template-columns: [line1] 100px [line2] 50px [line3] 150px;
}

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

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

.grid {
    display: grid;
    grid-template-columns: [column1-start] 100px [column1-end column2-start] 50px [column2-end] 150px;
}

 

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

منابع:

  1. https://www.w3schools.com/cssref/pr_grid-template-columns.asp [4]
  2. https://css-tricks.com/snippets/css/complete-guide-grid/ [5]
  3. https://medium.com/@elad/becoming-a-css-grid-ninja-f4c6db018cc1 [6]