CSS گرید-گاپ زراعت

تعریف و استفاده

ویژگی grid-gap اندازه فاصله بین ردیف و ستون در ترتیب شبکه را تعریف می‌کند و یک ویژگی کوتاه‌نویسی برای موارد زیر است:

توجه:این ویژگی در CSS3 به نام: gap.

لطفاً به:

آموزش CSS:ترتیب شبکه CSS

کتابخانه CSS:ویژگی grip-row-gap

کتابخانه CSS:ویژگی grip-column-gap

مثال

مثال 1

فاصله بین ردیف و ستون را به 50 پیکسل کوتاه‌نویسی کنید:

.grid-container {
  grid-gap: 50px;
}

آزمایش کنید

مثال 2

تنظیم فاصله ردیف به 20 پیکسل و فاصله ستون به 50 پیکسل:

.grid-container {
  grid-gap: 20px 50px;
}

آزمایش کنید

جمله‌بندی CSS

grid-gap: grid-row-gap grid-column-gap;

مقدار ویژگی

مقدار توضیح
grid-row-gap تنظیم اندازه فاصله بین ردیف‌ها در ترتیب شبکه. مقدار پیش‌فرض 0 است.
grid-column-gap تنظیم اندازه فاصله ستون‌ها. مقدار پیش‌فرض 0 است.

جزئیات فنی

مقدار پیش‌فرض: 0 0
وراثت: خیر
انیمیشن‌سازی: پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: مستندات CSS Grid Layout Module Level 1
جمله‌بندی JavaScript: object.style.gridGap="50px 100px"

پشتیبانی مرورگر

اعداد جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان کامل این ویژگی هستند.

چروم آئی ای / اینج فائر فاکس سافری اوپرا
57 16 52 10 44