1

I'm trying to make a simple blog layout using CSS Grid. The code is adding a 6px space at the bottom of the div holding the leading image in the post. I cannot eliminate this gap unless I explicitly size the row, which breaks the responsiveness of the site. The image file in the div is sized at 1140x760px.

enter image description here

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>
dshowland
  • 53
  • 4
  • Try adding `vertical-align: top` to your `img` elements. https://stackoverflow.com/a/31445364/3597276 – Michael Benjamin Feb 19 '18 at 23:06
  • Try put a **display: block** on the **img** tag, this is a classic case with an img tag that create a space with **display: inline**. – Seno Feb 20 '18 at 03:15

2 Answers2

1

Try put a display: block on the img tag, this is a classic case with an img tag that create a space with display: inline. Hope this helps.

Seno
  • 410
  • 4
  • 8
0

The extra space is coming from your grid-gap: 5px; in .post, which denotes how much space there should be between each child of .post. Simply remove this and your elements will be flush up against each other.

Naturally, this will remove all of the gaps from the layout. If you only want horizontal gaps, you can use 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 instead.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • I think he may be referring to the bottom gap inside the dashed border. – Michael Benjamin Feb 19 '18 at 23:07
  • 2
    Oh! I didn't even spot that at first. In that case, you may indeed be looking for `vertical-align: top`. If not, simply ensure that your `` tags actually take up the full height of their container with `height: 100%` :) – Obsidian Age Feb 19 '18 at 23:10