فاصله‌های تمیز: بهترین راه برای فاصله گذاری در گرید

فاصله‌گذاری جادویی در Grid: `gap`! 🎨

سلام به همگی! وقتی داریم یه شبکه‌ی Grid می‌سازیم، خیلی مهمه که بین آیتم‌ها یه فاصله‌ی مرتب و یکدست داشته باشیم. این فاصله باعث خوانایی بیشتر و زیبایی طرح می‌شه. خوشبختانه، CSS Grid یه راه خیلی ساده و راحت برای این کار داره: خصوصیت gap (که قبلاً به اسم grid-gap شناخته می‌شد). با gap می‌تونیم فاصله‌ی بین ستون‌ها و فاصله‌ی بین سطرها رو به راحتی تنظیم کنیم. پس بیاین ببینیم چطور این فاصله رو ایجاد کنیم! 🪄

1. `gap`: کوتاه‌نویسی برای فاصله! 📏

خصوصیت gap یه شورت‌هند (مخفف) هست که به ما اجازه می‌ده فاصله‌ی بین ستون‌ها (column gap) و فاصله‌ی بین سطرها (row gap) رو با هم تنظیم کنیم.

• یک مقدار: وقتی فقط یه مقدار رو مشخص می‌کنید، هم فاصله‌ی بین ستون‌ها و هم فاصله‌ی بین سطرها همون مقدار می‌شه.
• دو مقدار: وقتی دو مقدار رو مشخص می‌کنید، مقدار اول برای فاصله‌ی سطرها (row gap) و مقدار دوم برای فاصله‌ی ستون‌ها (column gap) در نظر گرفته می‌شه.

.grid-container-gap-single {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ستون مساوی */
  gap: 20px; /* هم فاصله سطرها و هم ستون‌ها 20px */
  background-color: #f8bbd0;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-container-gap-double {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ستون مساوی */
  gap: 30px 10px; /* سطرها 30px، ستون‌ها 10px */
  background-color: #e91e63;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #c2185b;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}

خیلی راحت شد! دیگه نیازی نیست برای فاصله‌ی سطرها و ستون‌ها جدا جدا کد بزنیم.

2. `row-gap` و `column-gap`: کنترل دقیق‌تر! 🧐

اگه خواستید فاصله‌ی سطرها و ستون‌ها رو به طور کاملاً مجزا و مستقل تنظیم کنید، می‌تونید از خصوصیت‌های row-gap و column-gap استفاده کنید. این‌ها دقیقاً همون مقادیری رو می‌گیرن که در حالت دوم gap استفاده کردیم.

.grid-container-separate-gaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ستون مساوی */
  row-gap: 40px; /* فاصله بین سطرها: 40 پیکسل */
  column-gap: 15px; /* فاصله بین ستون‌ها: 15 پیکسل */
  background-color: #f48fb1;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #e91e63;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}

این کنترل دقیق وقتی مفیده که بخواید مثلاً فاصله بین ستون‌ها کمتر از فاصله بین سطرها باشه، یا برعکس.

3. واحدهای اندازه‌گیری برای Gap 📏

مثل بقیه‌ی خصوصیت‌های CSS، برای gap هم می‌تونید از واحدهای مختلفی استفاده کنید:

• پیکسل (px): فاصله ثابت.
• درصد (%): فاصله بر اساس ابعاد کانتینر.
• واحد `em` یا `rem`: فاصله نسبی به فونت.
• واحد `fr`: این واحد مستقیماً برای `gap` استفاده نمی‌شه، اما می‌تونید از مقادیر `fr` برای ستون‌ها و سطرها استفاده کنید و بعد `gap` رو تنظیم کنید تا فضای خالی بین ستون‌ها و سطرها ایجاد بشه.

.grid-container-units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* فاصله‌ها با واحدهای مختلف */
  row-gap: 1rem;      /* فاصله سطرها نسبت به اندازه فونت */
  column-gap: 2%;     /* فاصله ستون‌ها 2% عرض کانتینر */
  background-color: #4dd0e1;
  padding: 20px;
  margin-bottom: 20px;
}

.grid-item {
  background-color: #00acc1;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

استفاده از واحدهای نسبی مثل `em` یا `rem` برای `gap` می‌تونه به واکنش‌گرایی بهتر طرح کمک کنه، چون فاصله با تغییر اندازه فونت کاربر، تغییر می‌کنه.

تنظیم فاصله‌ها با gap، یکی از ساده‌ترین و در عین حال مؤثرترین راه‌ها برای زیباتر کردن گرید شماست. این خصوصیت به شما اجازه می‌ده بدون اینکه مجبور باشید به آیتم‌ها مارجین بدید، فضاهای خالی مرتبی رو ایجاد کنید. همین الان امتحانش کنید! ✨