آموزش کار با شکاف گرید(Grid Gap) در CSS

به فضای بین ردیف ها(row) و ستون ها(column) در یک ظرف گرید(grid container)، شکاف های گرید(gap) گفته می شود. این شکاف ها، بین ردیف ها و ستون های گرید ایجاد می شوند، نه در اضلاع بیرونی ظرف گرید. 

سایز پیش فرض شکاف 0 است؛ یعنی اینکه بین آیتم های گرید هیچ فاصله ای وجود ندارد. سایز شکاف(gap) می تواند با استفاده از ویژگی های زیر تنظیم شود:

• column-gap : شکاف بین ستون های گرید را مشخص می کند. 
• row-gap : شکاف بین ردیف های گرید را مشخص می کند. 
• gap : یک ویژگی خلاصه شده از ویژگی های row-gap و column-gap را مشخص می کند. 

ویژگی column-gap در CSS

ویژگی column-gap شکاف بین ستون های یک گرید را مشخص می کند. 

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

ویژگی row-gap در CSS

ویژگی row-gap شکاف بین ردیف های یک گرید را مشخص می کند. 

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

ویژگی gap در CSS

ویژگی gap در واقع یک ویژگی خلاصه شده برای ویژگی های row-gap و column-gap است. اگر برای ویژگی gap فقط یک مقدار را مشخص کنیم، این مقدار، برای هردوی شکاف های ردیفی و ستونی اعمال می شود. اگر دو مقدار را اعمال کنیم، مقدار اول برای row-gap استفاده می شود و مقدار دوم برای column-gap مورد استفاده قرار می گیرد. 

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

.container {
  display: grid;
  gap: 30px 100px;
}

ویژگی های شکاف گرید در CSS

منبع: https://www.w3schools.com/css