gap属性控制网格行与列之间的间隙

深入理解CSSgap属性在Flex、Grid布局中的使用与语法,

原创已于 2024-03-22 10:33:36 修改 · 676 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-03-08 20:29:31 首次发布

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了CSSgap属性的作用，用于设置Flex和Grid布局中行与列间的间隙，支持长度值、百分比值以及混合使用，同时列举了各种合法的语法实例和全局值处理。

gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式。

适用于Flex布局、Grid布局、多列布局。

语法：

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;