Align sub-items within a CSS grid container with adjacent items?

Question

I'm looking into aligning the titles of each teaser (card) such that the titles are either the same height, or that the content after the title lines up accordingly with the other teaser in the same "row".

Is this possible to do using just CSS?

.wrapper {
  display: grid;
  align-items: start;
  width: 600px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto-fill;
  align-items: start;
  gap: 1rem;
}

.teaser {
  border: 2px dashed grey;
  padding: 10px;
  display: grid;
  align-items: start;
  grid-auto-rows: repeat(auto-fill, minmax(10rem, 1fr));
}

h3 {
  background-color: rgb(240 240 30 / 0.5);
  padding: 1rem;
}

.content p {
  background-color: rgb(120 240 90 / 0.5);
  padding: 1rem;
}

<h2>Cards</h2>
<div class="wrapper">
  <div class="teaser">
    <h3>Title</h3>
    <div class="content">
      <p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint.</p>
    </div>
  </div>
  
    <div class="teaser">
    <h3>Lorem Ipsum</h3>
    <div class="content">
      <p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
    </div>
  </div>
  
    <div class="teaser">
    <h3>Long title with many words that should end up on three lines because there is no space</h3>
    <div class="content">
      <p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate. Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
    </div>
  </div>
  
    <div class="teaser">
    <h3>Short Title</h3>
    <div class="content">
      <p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
    </div>
  </div>
  
    <div class="teaser">
    <h3>Lorem ipsum dolor sit amed</h3>
    <div class="content">
      <p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
    </div>
  </div>
</div>

The answers in [this post](https://stackoverflow.com/q/36721216/3597276) may be helpful. — Michael Benjamin, Oct 27 '22 at 16:39

score -2 · Answer 1 · answered Oct 27 '22 at 16:54

-2

You can use .wrapper{display: flex}` to do that

answered Oct 27 '22 at 16:54

Adnan Hamid

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 01 '22 at 00:44

Align sub-items within a CSS grid container with adjacent items?

1 Answers1