ویژگی CSS grid-template-columns
- صفحه قبل grid-template-areas
- صفحه بعدی grid-template-rows
تعریف و نحوه استفاده
ویژگی grid-template-columns تعیین می‌کند تعداد ستون‌ها (و عرض‌ها) در چیدمان شبکه است.
این مقادیر یک لیست از مقادیر جدا شده با فاصله هستند، که هر کدام اندازه هر ستون را مشخص می‌کنند.
لطفاً به: مراجعه کنید
آموزش CSSچیدمان شبکه CSS
دستورالعمل‌های CSSویژگی grid-template-rows
دستورالعمل‌های CSSویژگی grid-template
مثال
مثال 1
یک قالب چهار ستونی بسازید:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
مثال 2
یک چیدمان شبکه چهار ستونی بسازید و اندازه هر ستون را مشخص کنید:
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
نحوه استفاده از CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| none | مقدار پیش‌فرض. در صورت نیاز ستون‌ها را ایجاد کنید. |
| auto | اندازه ستون‌ها بستگی به اندازه قالب و اندازه محتوای عنصر در ستون دارد. |
| max-content | اندازه هر ستون بر اساس بزرگترین عنصر در ستون تعیین می‌شود. |
| min-content | اندازه هر ستون بر اساس کوچکترین عنصر در ستون تعیین می‌شود. |
| length | اندازه ستون‌ها را تنظیم کنید، از طریق استفاده از مقادیر اندازه قانونی. لطفاً به: مراجعه کنیدواحد‌های اندازه‌گیری. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial. |
| inherit | این ویژگی از ویژگی پدر خود ارث می‌برد. لطفاً به: مراجعه کنید inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | none |
|---|---|
| وراثت: | خیر |
| انیمیشن: | پشتیبانی می‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن. |
| نسخه: | بخش 1 مدل چیدمان شبکه CSS |
| نحوه استفاده از زبان JavaScript: | object.style.gridTemplateColumns="50px 50px 50px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- صفحه قبل grid-template-areas
- صفحه بعدی grid-template-rows
