網格差距 | grid-gap (Grid Layout) - CSS 中文開發手冊 - Break易站
網格差距 | grid-gap (Grid Layout) - CSS 中文開發手冊
grid-gap屬性是一個簡寫屬性grid-row-gap
/* One <length> value */ grid-gap: 20px; grid-gap: 1em; grid-gap: 3vmin; grid-gap: 0.5cm; /* One <percentage> value */ grid-gap: 16%; grid-gap: 100%; /* Two <length> values */ grid-gap: 20px 10px; grid-gap: 1em 0.5em; grid-gap: 3vmin 2vmax; grid-gap: 0.5cm 2mm; /* One or two <percentage> values */ grid-gap: 16% 100%; grid-gap: 21px 82%; /* Global values */ grid-gap: inherit; grid-gap: initial; grid-gap: unset;
初始值 | 作為簡寫的每個屬性:grid-row-gap:0 grid-column-gap:0 |
---|---|
適用於 | 網格容器 |
遺傳 | 沒有 |
媒體 | 視覺 |
計算值 | as each of the properties of the shorthand: grid-row-gap: the percentage as specified or the absolute length grid-column-gap: the percentage as specified or the absolute length |
動畫型別 | as each of the properties of the shorthand: grid-row-gap: a length grid-column-gap: a length |
規範的順序 | 形式語法定義的獨特的非模糊順序 |
grid-row-gap*0grid-column-gap*0
Applies to grid containers [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
grid-row-gap*指定的百分比或絕對長度grid-column-gap*指定的百分比或絕對長度
Animation type as each of the properties of the shorthand:
grid-row-gap*a長度grid-column-gap*a長度
Canonical order the unique non-ambiguous order defined by the formal grammar
語法
這個屬性被指定為一個值,<'grid-row-gap'>可以選擇一個值<'grid-column-gap'>。如果<'grid-column-gap'>省略,則將其設定為與值相同<'grid-row-gap'>。
<'grid-row-gap'>和<'grid-column-gap'>分別指定為一個<length>或一個<percentage>。
取值
<length>分隔網格線的溝槽的寬度。<percentage>分隔網格線的溝槽的寬度,相對於元素的尺寸。
形式語法
<'grid-row-gap'> <'grid-column-gap'>?
例
HTML內容
<div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
CSS內容
#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); grid-gap: 20px 5px; } #grid > div { background-color: lime; }
規範
Specification | Status | Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid-gap' in that specification. | Candidate Recommendation | Initial definition |
瀏覽器相容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57.01 | No support3 | 52.0 (52.0)2 | No support3 | 444 | No support6 |
<percentage> value | No support | No support3 | 52.0 (52.0)2 | No support3 | No support4 | No support6 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57.01 | 57.01 | ? | 52.0 (52.0)3 | 44 | ? |
<percentage> value | No support | No support | 52.0 (52.0)5 | No support | No support | No support |