فاصله شبکه (Grid Gaps)
در گرید (Grid)، «فاصله شبکه (Grid Gap)» یعنی فاصله بین ردیف ها و ستون ها. این فاصله دورِ بیرون نیست؛ میانِ مسیرهاست. پیش فرض صفر است. پس آیتم ها می چسبند. برای شناخت مسیرها، صفحه ردیف و ستون شبکه را ببین.
تعریف فاصله شبکه و انواع ویژگی ها
«فاصله (Gap)» فضای بین ستون ها و ردیف هاست. ویژگی های column-gap و row-gap جداگانه عمل می کنند. ویژگی gap میان بُر هر دو است.
نکته: گپ ها فقط بین خطوط شبکه هستند؛ بیرون کانتینر نیستند.
column-gap؛ فاصله بین ستون ها
«column-gap» فاصله ستون ها را تنظیم می کند. مثل فاصله نیمکت های کنار هم.
<style>
.container {
display: grid;
column-gap: 50px;
}
</style>
row-gap؛ فاصله بین ردیف ها
«row-gap» فاصله ردیف ها را تنظیم می کند. مثل فاصله ردیف های صف مدرسه.
<style>
.container {
display: grid;
row-gap: 50px;
}
</style>
gap؛ میان بُر row-gap و column-gap
«gap» هر دو فاصله را باهم تنظیم می کند. یک مقدار، برای هر دو یکی است.
<style>
.container {
display: grid;
gap: 50px;
}
</style>
gap با دو مقدار
با دو مقدار، اولی برای ردیف هاست و دومی برای ستون ها.
<style>
.container {
display: grid;
gap: 30px 100px;
}
</style>
نکته: مقدار پیش فرض همه گپ ها «0» است. پس بدون تنظیم، فاصله ای نیست.
گام های تمرینی
- یک کانتینر گرید بساز.
- برای ستون ها column-gap: 20px بده.
- برای ردیف ها row-gap: 10px بده.
- حالا فقط gap: 24px تست کن.
- در پایان gap: 16px 40px را امتحان کن.
جمع بندی سریع
- فاصله شبکه فقط بین خطوط است.
- column-gap برای ستون هاست.
- row-gap برای ردیف هاست.
- gap میان بُر هر دو ویژگی است.
- پیش فرض گپ همیشه صفر است.
بخش فاصله شبکه مرجع تو خواهد بود. برای مسیرها، Grid Tracks را هم ببین. برای تراز آیتم ها، بعداً به تراز در گرید برو.