Positioning rows that expand beyond their content-CodePudding

.posts-container {
  align-items: start;
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-width: 1000px;
}

.container {
  align-items: flex-start;
  display: grid;
  grid-template-areas: "title image" "description image" "categories image";
  grid-template-columns: auto 250px;
  grid-template-rows: min-content;
  column-gap: 27px;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 44px;
}

.title {
  background-color: red;
  grid-area: title;
  line-height: 140%;
  margin-bottom: 27px;
}

.image {
  background-color: green;
  grid-area: image;
  height: 250px;
  position: relative;
  width: 100%;
}

.categories {
  background-color: purple;
  grid-area: categories;
  font-size: 10px;
}

.description {
  background-color: orange;
  grid-area: description;
  font-size: 14px;
  margin: 0;
  margin-bottom: 11px;
}

<div class='posts-container'>
  <div class='container'>
    <div class='title'>This is a blog title that I use to show the problem</div>
    <div ></div>
    <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit.</p>
    <p class='categories'>Apr 2 | Software development - Testing</p>
  </div>
  <div class='container'>
    <div class='title'>This is a blog title that I use to show the problem</div>
    <div ></div>
    <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit. Fusce at mattis nulla, a sagittis nisl. Vivamus vel orci sit amet lectus
      maximus porta. Sed accumsan feugiat nisl, at ullamcorper justo interdum id. Quisque vel justo at augue consequat volutpat id et augue. Aenean tincidunt vel urna id ornare. Integer id finibus libero. Fusce faucibus erat leo, non dignissim nunc ultricies
      vel. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent
      ullamcorper iaculis ipsum. Morbi ac tempus velit.</p>
    <p class='categories'>Apr 2 | Software development - Testing</p>
  </div>
</div>

I would like to the elements on the left side of the image area towards the top of the grid instead of spacing them evenly. In the first example, where there is a very short description I would like the categories paragraph to push upwards so the spacing between the rows is according to the element height and margin.

I would also like to keep the way the elements position in the second example where the title description and categories have a combined height larger than the image element.

This image demonstrates the desired layout:

How do I achieve this using CSS grid? I expected using align-items: flex-start and grid-template-rows: min-content would do the trick, but I seem to be missing something.

CodePudding user response：

You could get the desired layout by specifying a grid-template-row size for each of your rows on your container class. Right now you just have min-content. One option would be grid-template-rows: min-content 220px min-content since your image is fixed at 250px height, this would ensure the left side content is always a bit larger, but you can fine tune that middle section to find the right magic number.

Or if you wanted to avoid magic numbers you could make the middle section 1fr, relatively position your categories class to push it out of the box and increase the bottom margin on your container so nothing overlaps like shown in this code snippet.

.posts-container {
  align-items: start;
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-width: 1000px;
}

.container {
  align-items: flex-start;
  display: grid;
  grid-template-areas: "title image" "description image" "categories image";
  grid-template-columns: auto 250px;
  grid-template-rows: min-content 1fr min-content;
  column-gap: 27px;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 60px;
}

.title {
  background-color: red;
  grid-area: title;
  line-height: 140%;
  margin-bottom: 27px;
}

.image {
  background-color: green;
  grid-area: image;
  height: 250px;
  position: relative;
  width: 100%;
}

.categories {
  background-color: purple;
  grid-area: categories;
  font-size: 10px;
  margin: 0;
  position: relative;
  top: 20px;
}

.description {
  background-color: orange;
  grid-area: description;
  font-size: 14px;
  margin: 0;
  margin-bottom: 11px;
}

<div class='posts-container'>
  <div class='container'>
    <div class='title'>This is a blog title that I use to show the problem</div>
    <div ></div>
    <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit.</p>
    <p class='categories'>Apr 2 | Software development - Testing</p>
  </div>
  <div class='container'>
    <div class='title'>This is a blog title that I use to show the problem</div>
    <div ></div>
    <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit. Fusce at mattis nulla, a sagittis nisl. Vivamus vel orci sit amet lectus
      maximus porta. Sed accumsan feugiat nisl, at ullamcorper justo interdum id. Quisque vel justo at augue consequat volutpat id et augue. Aenean tincidunt vel urna id ornare. Integer id finibus libero. Fusce faucibus erat leo, non dignissim nunc ultricies
      vel. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent
      ullamcorper iaculis ipsum. Morbi ac tempus velit.</p>
    <p class='categories'>Apr 2 | Software development - Testing</p>
  </div>
</div>

CodePudding user response：

To get your desired result, just nest all grid items that are not the image in their own wrapper. Then you can add place-content: flex-start; on your grid. This allows for only the specified and default margin's are used to space the left grid items.

.posts-container {
  align-items: start;
  display: flex;
  flex-direction: column;
  justify-content: start;
  max-width: 1000px;
}

.container {
  align-items: flex-start;
  display: grid;
  place-items: flex-start;
  grid-template-areas: "title image" "description image" "categories image";
  grid-template-columns: auto 250px;
  grid-template-rows: min-content;
  column-gap: 27px;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 44px;
}

.title {
  background-color: red;
  grid-area: title;
  line-height: 140%;
  margin-bottom: 27px;
}

.image {
  background-color: green;
  grid-area: image;
  height: 250px;
  position: relative;
  width: 100%;
}

.categories {
  background-color: purple;
  grid-area: categories;
  font-size: 10px;
}

.description {
  background-color: orange;
  grid-area: description;
  font-size: 14px;
  margin: 0;
  margin-bottom: 11px;
}

<div class='posts-container'>
  <div class='container'>
    <div class='left-wrapper'>
      <div class='title'>This is a blog title that I use to show the problem</div>
      <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit.</p>
      <p class='categories'>Apr 2 | Software development - Testing</p>
    </div>
    <div ></div>
  </div>
  <div class='container'>
    <div class='left-wrapper'>
      <div class='title'>This is a blog title that I use to show the problem</div>
      <p class='description'>Fusce id velit vel ipsum consequat cursus sit amet ac ex. Nulla luctus laoreet pellentesque. Proin pellentesque ac metus non imperdiet. Etiam pharetra interdum libero a suscipit. Fusce at mattis nulla, a sagittis nisl. Vivamus vel orci sit amet
        lectus maximus porta. Sed accumsan feugiat nisl, at ullamcorper justo interdum id. Quisque vel justo at augue consequat volutpat id et augue. Aenean tincidunt vel urna id ornare. Integer id finibus libero. Fusce faucibus erat leo, non dignissim
        nunc ultricies vel. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus
        velit. Praesent ullamcorper iaculis ipsum. Morbi ac tempus velit.</p>
      <p class='categories'>Apr 2 | Software development - Testing</p>
    </div>
    <div ></div>
  </div>
</div>