CSS 参考

Appearance

grid-row-gap ​

grid-row-gap 属性设置 Grid 容器中行之间的间距。

语法 ​

css
grid-row-gap: <value>;

常见值 ​

值说明示例
<length>行间距grid-row-gap: 10px

示例 ​

基础用法 ​

css
/* 行间距 */
.row-gap {
  grid-row-gap: 10px;
}

高级用法 ​

css
/* Grid 容器 */
.grid-container {
  display: grid;
  grid-row-gap: 10px;
}

/* 行间距 */
.row-gap {
  grid-row-gap: 10px;
}

/* 悬停效果 */
.card {
  transition: grid-row-gap 0.3s ease-in-out;
}

.card:hover {
  grid-row-gap: 20px;
}

/* Grid 布局 */
.grid-layout {
  display: grid;
  grid-row-gap: 10px;
}

/* 表单元素 */
.input {
  grid-row-gap: 10px;
}

/* 按钮布局 */
.button {
  grid-row-gap: 10px;
}

/* 响应式布局 */
.responsive {
  display: grid;
  grid-row-gap: 10px;
}

@media (max-width: 600px) {
  .responsive {
    grid-row-gap: 5px;
  }
}

浏览器兼容性 ​

浏览器版本
Chrome57+
Firefox52+
Safari10.1+
Edge16+
iOS Safari10.3+
Android Browser57+
Chrome for Android57+

注意事项 ​

  • grid-row-gap 只在 Grid 容器中有效
  • grid-row-gap 设置 Grid 容器中行之间的间距
  • grid-row-gap 可以与 grid-column-gap 配合使用

相关属性 ​

相关资源 ​