CSS-网格单元格中的小 Space

Question

我正在尝试使用 CSS 网格制作一个简单的博客布局。代码是在 div 的底部添加一个 6px space 来保存 post 中的前导图像。我无法消除这个差距，除非我明确调整行的大小，这会破坏网站的响应能力。 div 中的图像文件大小为 1140x760 像素。

CSS:

.post {
  display: grid;
    grid-gap: 5px;
    grid-template-areas:
      "hero hero"
      "article sidebar";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.post > div > img {
  width: 100%;
}

#hero {
  grid-area: hero;
}

#article {
  grid-area: article;
}

#sidebar {
  grid-area: sidebar;
}

HTML

<div class="post">
  <div id="hero">
    <img src="/images/{{ page.hero }}.jpg">
  </div>
  <div id="article">
    <h2>{{ page.title }}</h2>
    {{ page.content }}
  </div>
  <div id="sidebar">
    {% include sidebar.html %}
  </div>
</div>

Answer 1

额外的space来自你在.post中的grid-gap: 5px;，这表示应该有多少space在 .post 的每个 child 之间。只需删除它，您的元素就会相互齐平。

自然地，这将从布局中删除所有的间隙。如果你只想要水平间隙，你可以使用 grid-column-gap, and if you only want vertical gaps, you can use grid-row-gap. If you only want a gap in a specific place, you can use margin 代替。

Answer 2

尝试在 img 标签上放一个 display: block，这是一个经典案例，它使用 img 标签创建 space 和 display: inline.希望这有帮助。

CSS-网格单元格中的小 Space

Small Space in CSS-Grid Cell

css

css-grid