Html Question posted in
Some basic documentation can be found here.

Html – Arranging the content of a grid in a reduced space with CSS

More exactly, I’d like the date and category to always be at the bottom, but no lower than the thumbnail, regardless of the height of the title. When the title is too long, the "surplus" should not be visible.

When on mobile devices, some of my posts look as this:

this is what I have

some as this:

this is what I have

What I want to achieve is this:

this is what I want

article {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5rem;
  grid-template-areas: "A B";
  grid-template-columns: 1fr 2fr;
}

img.thumbnail {
  min-width: 144px;
}

.entry-header * {
  line-height: 18px;
}

.entry-title {
  font-size: 16px;
}

.entry-meta {
  font-size: 12px;
}
<article class="post">
  <div class="post-thumbnail">
    <a class="post-link" href="example.com/post_title">
      <img src="https://via.placeholder.com/300.jpg" class="thumbnail">
    </a>
  </div>

  <header class="entry-header">
    <h2 class="entry-title">
      <a class="post-link" href="#">Post Title</a>
    </h2>

    <div class="entry-meta">
      <span class="posted-on">2023.05.05</span> |
      <span class="posted-in">Category</span>
    </div>
  </header>
</article>
Tags:

2

Answers


  1. 0

    The following javascript will get the height of the image and entrymeta, then the height of the title to image height minus entrymeta height so that the title will never be longer than the image height. I think it is a better solution. Hope it helps.

      window.onload = function() {
  var thumbnail = document.querySelector('.thumbnail');
  var imgHeight = thumbnail.offsetHeight;
  var entryMeta = document.querySelector('.entry-meta');
  var textHeight = entryMeta.offsetHeight;
  var entryTitle = document.querySelector('.entry-title');
  var titleHeight = imgHeight - textHeight*2;
  entryTitle.style.height = titleHeight + "px";
  };
    article {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5rem;
  grid-template-areas: "A B";
  grid-template-columns: 1fr 2fr;
}

img.thumbnail {
  min-width: 144px;
}

.entry-header * {
  line-height: 18px;
  overflow: scroll;
}

.entry-title {
  font-size: 16px;
}

.entry-meta {
  font-size: 12px;
  margin-top: auto; /* push to bottom of .entry-header */
}

/* added CSS */
.entry-header {
  display: flex;
  flex-direction: column; /* stack title and class .entry-meta vertically */
}
    <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<article class="post">
  <div class="post-thumbnail">
    <a class="post-link" href="example.com/post_title">
      <img src="https://via.placeholder.com/300.jpg" class="thumbnail">
    </a>
  </div>

  <header class="entry-header">
    <h2 class="entry-title">
      <a class="post-link" href="#">Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title Post Title</a>
    </h2>

    <div class="entry-meta">
      <span class="posted-on">2023.05.05</span> |
      <span class="posted-in">Category</span>
    </div>
  </header>
</article>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Convert the container .entry-header to a flexbox container with display: flex;. Then you can push the .entry-meta element to the bottom of the container by adding margin-top: auto

    article {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5rem;
  grid-template-areas: "A B";
  grid-template-columns: 1fr 2fr;
}

img.thumbnail {
  min-width: 144px;
}

.entry-header * {
  line-height: 18px;
}

.entry-title {
  font-size: 16px;
}

.entry-meta {
  font-size: 12px;
}

/* added CSS */
.entry-header {
  display: flex
}

.entry-meta {
  margin-top: auto;
}
    <article class="post">
  <div class="post-thumbnail">
    <a class="post-link" href="example.com/post_title">
      <img src="https://via.placeholder.com/300.jpg" class="thumbnail">
    </a>
  </div>

  <header class="entry-header">
    <h2 class="entry-title">
      <a class="post-link" href="#">Post Title</a>
    </h2>

    <div class="entry-meta">
      <span class="posted-on">2023.05.05</span> |
      <span class="posted-in">Category</span>
    </div>
  </header>
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search