CSS - grid-gap 属性



CSS grid-gap 属性是一个简写属性,用于定义网格布局中行和列之间间隙的大小。grid grid-gap 属性是以下单个网格相关属性的简写:grid-row-gapgrid-column-gap

语法

grid-gap: row-gap column-gap;

属性值

描述
row-gap 它使用长度或百分比值指定网格布局中行之间的间隙。
column-gap 它使用长度或百分比值指定网格布局中列之间的间隙。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格间隙属性示例

以下示例使用不同的值解释了grid-gap 属性。

使用长度值的网格间隙属性

要在单个语句中设置行和列之间的垂直和水平间隙,我们将间隙值(以长度 - px、em 等表示)指定给grid-gap 属性。该属性最多接受两个值,单个值在两个方向上应用相同的间隙,而两个值分别单独设置垂直和水平间隙。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .grid-container { background-color: lightgrey; display: grid; grid-template-columns: auto auto auto; padding: 10px; } .grid-container>div { border: 2px solid green; color: white; text-align: center; background-color: lightgreen; padding: 10px; } .container1 { grid-gap: 25px; } .container2 { grid-gap: 15px 56px; } </style> </head> <body> <h2> CSS grid-gap Property </h2> <h4> grid-gap: 25px (horizontal and vertical gap of 25px between rows and columns) </h4> <div class="grid-container container1"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> <h4> grid-column-gap: 15px 56px (vertical gap of 15px and horizontal gap of 56px between rows and columns) </h4> <div class="grid-container container2"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> </body> </html>

使用百分比值的网格间隙属性

要在单个语句中设置行和列之间的垂直和水平间隙,我们将间隙值(以百分比表示)指定给grid-gap 属性。该属性最多接受两个值,单个值在两个方向上应用相同的间隙,而两个值分别单独设置垂直和水平间隙。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .grid-container { height: 200px; width: 500px; background-color: lightgrey; display: grid; grid-template-columns: auto auto auto; padding: 10px; } .grid-container>div { border: 2px solid green; color: white; text-align: center; background-color: lightgreen; padding: 10px; } .container1 { grid-gap: 10%; } .container2 { grid-gap: 15% 20%; } </style> </head> <body> <h2> CSS grid-gap Property </h2> <h4> grid-gap: 10% (horizontal and vertical gap of 10% relative to the size of the container applied to rows and columns) </h4> <div class="grid-container container1"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> <h4> grid-column-gap: 15% 20% (vertical gap of 15% and horizontal gap of 20% relative to the size of the container applied to rows and columns) </h4> <div class="grid-container container2"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
grid-gap 57 16 52 10.1 44
css_properties_reference.htm
广告