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

دستور grid-template-columns

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

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

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

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

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

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 هم که میزان فاصله سلول‌ها از هم رو تعیین می‌کنه و نتیجه در مرورگر :

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

پاورپوینت معرفی زبان HTML — آشنایی با زبان رایج نشانه گذاری

کلیک کنید

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

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

<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 اقدام به ایجاد ۳ ستون با عرض مساوی نمودیم.

حتی می‌توانیم از واحد 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 در سی اس اس ۳ ستون تعریف نمودیم.

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

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

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

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

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

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

بفرمایین:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پاورپوینت زبان های برنامه نویسی، سیستم عامل ها و Data bases

کلیک کنید

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;
}

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

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

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

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

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

و نتیجه :

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

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

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

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

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

و نتیجه:

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

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

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

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

همونطور که مشاهده می‌کنین مجبوریم ۱۲ بار عبارت 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.

تفاوت 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;
}

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

پاورپوینت درباره CSS — هدف و کاربرد آن

پاورپوینت درباره CSS — هدف و کاربرد آن

کلیک کنید

منابع:

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