خاصیت gap در CSS - وب سایت PNLdev

نمونه کد

یک نمونه ساده از خاصیت gap:

.grid-container {
    border: 3px solid green;
    background-color: mintcream;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 60px;
}

آزمایشگاه

تعریف و کاربرد

برای تعیین اندازه و فاصله بین ردیف ها و ستون ها در طرح بندی شبکه ای از خاصیت gap استفاده می کنیم که 2 زیر مجموعه:

row-gap
column-gap

نیز برای ستون و ردیف استفاده می شوند.

اطلاعات

#	توضیحات
مقدار پیشفرض	نرمال نرمال
ارث بری	خیر
انیمیشن	بله
نسخه	CSS Box Alignment Module Level 3
نگارش JS	object.style.gap="50px 100px"

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
gap (in Grid)
gap (in Flexbox)
gap (in Multiple Columns)

شیوه نگارش

gap: row-gap column-gap|initial|inherit;

مقادیر

مقادیر	توضیحات
row-gap	اندازه بین ردیف ها را تعیین می کند.
column-gap	اندازه بین ستون ها را تعیین می کند.
initial	این مقدار را به ویژگی پیش فرض خود اضافه می کند.
inherit	این مقدار را از تگ والد خود به ارث می برد.

خاصیت gap در CSS gap property CSS