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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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.
CodePudding user response:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>