Align card child elements across cards

user_15742213 0
Viewed 80

I have a bunch of cards that stack on a page. I want the element with the text to align across cards, and I also want the bullets to line up across cards. I'm guessing this will mean that I want the elements above and below to take the height of that element across cards that has the most content in them. I saw some possible solutions mentioned using CSS grid, but that doesn't seem to work when there are multiple rows of cards. Is there any other CSS solution that would work here? Thanks

Note that all the content within the cards can vary in height, so setting a fixed height won't work.

.main {
  background: #f7f7f7;
  height:100vh;
  font-family:Arial;
}

p {
  color:blue;
}

h1{
  font-size:20px;
}

.container {
  width:80%;
  margin: 0 auto;
}

.cards-container {
  display:flex;
  flex-wrap:wrap;
}

.card {
  background: white;
  flex-basis:32%;
  margin-left:1%;
  margin-bottom:1%;
}
<div class="main">
   <div class="container">
      <div class="cards-container">
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can vary depending on the content</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can very depending onthe content inside of it, it can be very long</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
      </div>
   </div>
</div>

css html
2 Answers

If you don't mind using a CSS framework for this, you could check out UIKit's height match. You would just have to add a UIKit grid with the uk-height-match property for it like this:

<div uk-grid uk-height-match="target: .card > p.match-height">
    <div class="card">
            <h1>Title goes here</h1>
            <p class="match-height">LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can vary depending on the content</h1>
            <p class="match-height">LINE UP </p>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
</div>

Note that the match-height class on the p tag is optional, but recommended to protect against bugs when adding multiple p tags.

user_115234500

Good news you can easily do that with subgrid

Bad news (as per November 2021) the support isn't great

body {
  background: #f7f7f7;
}

.main {
  height: 100vh;
  font-family: Arial;
}

p {
  color: blue;
}

h1 {
  font-size: 20px;
}

.cards-container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1%;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 1rem;
  background: white;
  border-radius: 1rem;
}
<div class="main">
  <div class="cards-container">

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>
    <div class="card">
      <h1>Title goes here and this can vary depending on the content</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
      <ul>
        <li>list item</li>
        <li>list item</li>

      </ul>
    </div>
    <div class="card">
      <h1>Title goes here and this can very depending onthe content inside of it, it can be very long</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>

      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

  </div>
</div>

user_76405110
Related