ردیف و ستون شبکه (Grid Tracks)
در گرید (Grid)، «ردیف (Row)» و «ستون (Column)» مسیرهای چیدمان اند. با ویژگی های grid-template-columns و grid-template-rows اندازه و تعداد را می چینیم. این یعنی کنترل ساده چیدمان مثل جدول مدرسه، اما انعطاف پذیرتر. برای مرور پایه ها، به ردیف و ستون شبکه هم سر بزن.
تعریف Grid Tracks و ویژگی ها
«مسیر گرید (Grid Track)» یعنی یک ردیف یا ستون. ویژگی grid-template-columns تعداد و عرض ستون ها را تعیین می کند. ویژگی grid-template-rows تعداد و ارتفاع ردیف ها را تعیین می کند. همچنین grid-template-areas با نام گذاری، جای آیتم ها را مشخص می کند.
grid-template-columns: auto
کلیدواژه «auto» یعنی مرورگر عرض هر ستون را خودکار محاسبه می کند. برای سه ستون برابر مثل تقسیم ناهار بین سه نفر!
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
}
</style>
ستون ها با عرض ترکیبی
می توانید ستون ها را ترکیب کنید: برخی ثابت، یکی خودکار. مثل دو نیمکت ثابت و یک نیمکت شناور.
<style>
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
</style>
نکته: اگر آیتم ها بیشتر از ستون ها باشند، ردیف های جدید خودکار ساخته می شوند.
واحد fr (Fraction)
واحد «fr» یعنی سهم از فضای آزاد. 1fr یک سهم است؛ 2fr دو سهم. مثل تقسیم کیک بین دوستان.
ستون های برابر با fr
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
ستون وسط دوبرابر
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
</style>
تابع repeat()
تابع repeat() الگو را چندبار تکرار می کند. مثل گفتن «سه بار 1fr» به جای نوشتن طولانی.
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
</style>
تابع minmax()
تابع minmax(min,max) حداقل و حداکثر اندازه را می دهد. مثل گفتن: «کمتر از 80px نشود، تا 1fr رشد کند».
<style>
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
</style>
grid-template-rows
این ویژگی ارتفاع ردیف ها را تعیین می کند. می توانید px، %، fr، یا min-content و max-content بدهید.
<style>
.container {
display: grid;
grid-template-rows: 80px 200px;
}
</style>
نکته: اگر ردیف تعریف نشود، مقدار پیش فرض «auto» است و با محتوا رشد می کند.
برای فاصله ها، ادامه مسیر را در فاصله شبکه (Grid Gap) ببین.
گام های تمرینی
- یک کانتینر گرید بساز.
- سه ستون برابر با 1fr بده.
- ستون وسط را 2fr کن.
- با repeat() الگو را کوتاه کن.
- برای ستون اول minmax(80px,1fr) تست کن.
جمع بندی سریع
- auto یعنی اندازه گیری خودکار.
- fr فضای آزاد را تقسیم می کند.
- repeat() کدنویسی را کوتاه می کند.
- minmax() حداقل و حداکثر می دهد.
- rows ارتفاع ردیف ها را تعیین می کند.