时间戳

首页 > 解决方案 > 为什么 CSS 网格会在网格线结束后多留一个空隙？

css - 为什么 CSS 网格会在网格线结束后多留一个空隙？

问题描述

我学到的是，这grid-gap实际上是在列和/或行之间产生间隙。

我的 Grid 有 6 列和 6 行，因此，如果我设置column-gap，列之间应该有 5 个间隙。但在可能的情况下，有 6 个间隙。网格线结束后又多了一个间隙。为什么会这样？

在此处输入图像描述

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
  background-color: rgb(240, 236, 233);
  font-family: 'Roboto', sans-serif;
  margin: auto;
  text-align: center;
}

body {
  /*width: 80%;
    margin:auto;*/
  display: grid;
  grid-template: 0.5fr 3fr 1fr 3fr 2fr 0.5fr / repeat(6, 1fr);
  gap: 1rem;
}


/* header */

header {
  grid-area: 1 / 1 / 2 / 7;
  height: auto;
  display: grid;
}
<body>
  <header>
    <h1>PupSpa</h1>
  </header>
  <div id="banner">
    <h2></h2>
    <img src=>
  </div>
  <div id="description">
    <p></p>
  </div>
  <div class="box address">
    <img src="">
    <h3></h3>
  </div>
  <div class="box hours">
    <img src="">
    <h4></h4>
  </div>
  <div class="box call_us">
    <img src="">
    <h4></h4>
  </div>

标签： csscss-grid

解决方案

由于我看不到任何问题，因此我稍微清理了您的代码并填充了所有 6 行。我没有使用主体，而是添加了一个 div，它是网格容器。然后从正文中删除边距和填充。这是我的结果：

具有 6 列 + 行和 5 个间隙的网格容器

垂直 5 个垫片，水平 5 个垫片，无需额外空间。

的HTML：

<div class="body">
    <header>
        <h1>PupSpa</h1>
    </header>
    <div id="banner">
        <h2>2</h2>
        <img src=>
    </div>
    <div id="description">
        <p>3</p>
    </div>
    <div class="box address">
        <img src="">
        <h3>a</h3>
    </div>
    <div class="box hours">
        <img src="">
        <h4>b</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>

    <div id="banner">
        <h2>2</h2>
        <img src=>
    </div>
    <div id="description">
        <p>3</p>
    </div>
    <div class="box address">
        <img src="">
        <h3>a</h3>
    </div>
    <div class="box hours">
        <img src="">
        <h4>b</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>

    <div id="banner">
        <h2>2</h2>
        <img src=>
    </div>
    <div id="description">
        <p>3</p>
    </div>
    <div class="box address">
        <img src="">
        <h3>a</h3>
    </div>
    <div class="box hours">
        <img src="">
        <h4>b</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>

    <div id="banner">
        <h2>2</h2>
        <img src=>
    </div>
    <div id="description">
        <p>3</p>
    </div>
    <div class="box address">
        <img src="">
        <h3>a</h3>
    </div>
    <div class="box hours">
        <img src="">
        <h4>b</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>

    <div id="banner">
        <h2>2</h2>
        <img src=>
    </div>
    <div id="description">
        <p>3</p>
    </div>
    <div class="box address">
        <img src="">
        <h3>a</h3>
    </div>
    <div class="box hours">
        <img src="">
        <h4>b</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
    <div class="box call_us">
        <img src="">
        <h4>c</h4>
    </div>
</div>

CSS：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
  background-color: rgb(240, 236, 233);
  font-family: 'Roboto', sans-serif;
  margin: auto;
  text-align: center;
}

html, body {
    margin: 0;
    padding: 0;
}

.body {
  /*width: 80%;
    margin:auto;*/
  display: grid;
  grid-template: 0.5fr 3fr 1fr 3fr 2fr 0.5fr / repeat(6, 1fr);
  grid-gap: 1rem;
}


/* header */

header {
  grid-area: 1 / 1 / 2 / 7;
  height: auto;
  display: grid;
}

工作示例：这里

推荐阅读