如何缩小CSS Grid布局下4个嵌套div块的间距？

要让Grid布局里的4个div块间距更近，核心是调整网格间距相关属性，具体操作如下：

• 减小网格间距值
  你当前代码里的grid-column-gap和grid-row-gap设置的是15px，直接把这两个值改小就能缩小间距。现在更推荐使用统一的gap简写属性，同时控制行列间距：

  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    /* 单值表示行列间距一致，比如设为8px，可按需调整 */
    gap: 8px;
    /* 也可以分别设置行、列间距，比如行间距6px，列间距8px */
    /* gap: 6px 8px; */
  }
  

• 检查子元素自身的内边距/外边距
  如果子div本身设置了padding或margin，也会让视觉上的间距变大，需要同步调整子元素的样式：

  .list > div {
    /* 去掉或减小内边距，根据实际需求调整 */
    padding: 4px;
    /* 清除子元素的外边距 */
    margin: 0;
  }
  

内容的提问来源于stack exchange，提问作者sbess