can someone explain it to me how this is made

<div className={Css.Specifications}>
<h3>Specifications</h3>
<div className={Css.cards}>
<div className={Css.card}>
<h3>General Features</h3>
<div className="features">
<div className={Css.feature}>
<div className="featureKey">Release Date</div>
<div className="featureValue">2022-02-20</div>
</div>
</div>
</div>
</div>

</div>
<div className={Css.Specifications}>
<h3>Specifications</h3>
<div className={Css.cards}>
<div className={Css.card}>
<h3>General Features</h3>
<div className="features">
<div className={Css.feature}>
<div className="featureKey">Release Date</div>
<div className="featureValue">2022-02-20</div>
</div>
</div>
</div>
</div>

</div>
No description
26 Replies
Anonymous DEV
Anonymous DEV13mo ago
how are they align like that
.Specifications{
margin: 2rem;
}
.cards{
margin: 1rem 0;
}
.card{
box-shadow: 0 0 10px lightgrey;
min-height: 10rem;
width: 30rem;
padding: 1rem;
}
.feature{
display: flex;
justify-content: space-between;
margin: 1rem 0;
border-bottom: 1px solid lightgrey;
padding: 0.5rem 0;
}
.Specifications{
margin: 2rem;
}
.cards{
margin: 1rem 0;
}
.card{
box-shadow: 0 0 10px lightgrey;
min-height: 10rem;
width: 30rem;
padding: 1rem;
}
.feature{
display: flex;
justify-content: space-between;
margin: 1rem 0;
border-bottom: 1px solid lightgrey;
padding: 0.5rem 0;
}
Jochem
Jochem13mo ago
we're missing the featureKey and featureValue class definitions to say for sure but long story short: display: flex;
Anonymous DEV
Anonymous DEV13mo ago
No description
Anonymous DEV
Anonymous DEV13mo ago
this is what i have
No description
Anonymous DEV
Anonymous DEV13mo ago
one card is effecting the height of other
Anonymous DEV
Anonymous DEV13mo ago
No description
Jochem
Jochem13mo ago
I'm very confused, you were asking how the values are all lining up in the first screenshot
Anonymous DEV
Anonymous DEV13mo ago
yeah i figured that out not i have this problem
Jochem
Jochem13mo ago
right
Anonymous DEV
Anonymous DEV13mo ago
sorry
Jochem
Jochem13mo ago
answer's the same, display: flex; if you link the site, I can point to the properties
Anonymous DEV
Anonymous DEV13mo ago
how do i fix the issue with the height
Jochem
Jochem13mo ago
share your own code in a codepen
Anonymous DEV
Anonymous DEV13mo ago
its in react can we do that?
Jochem
Jochem13mo ago
make a minimal example then, or use something else that can run react
Jochem
Jochem13mo ago
that's the default display: flex; behavior. By default, align-items is set to stretch, which stretches children to the same size in the cross axis if you change align-items to start or center, it'll stop stretching
Anonymous DEV
Anonymous DEV13mo ago
now its doing this
No description
Jochem
Jochem13mo ago
if you add this to .cards:
flex-direction: column;
max-height: 50rem;
flex-direction: column;
max-height: 50rem;
and probably set a max-width that would fit two cards max as well, it should tile the way you want it's not ideal though, because if you add too many cards, the layout will break this is called a masonry layout, and there's no simple way to do them yet without resorting to javascript if you know your cards will always be a certain size, you can fake it with this, but if it's an arbitrary number with arbitrary sizes, you'd have to add javascript to recalculate the max-height basically, it's a bad solution, and you should probably just do some research into masonry layouts
Anonymous DEV
Anonymous DEV13mo ago
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
Anonymous DEV
Anonymous DEV13mo ago
i found this i never heard of the properties its using in this example is it old or what
MarkBoots
MarkBoots13mo ago
Css columns, it's been around quite some time, but still relevant and usefull. Commonly used for news articles, but it works also for 'masonry'-like layouts https://developer.mozilla.org/en-US/docs/Web/CSS/columns
Anonymous DEV
Anonymous DEV13mo ago
the one i send is what i need and its not made using grid .
Anonymous DEV
Anonymous DEV13mo ago
how to make it use space how much it needs not more then that
No description
MarkBoots
MarkBoots13mo ago
you could do
.cards {
column-width: 15rem; /* ideal width */
column-count: 3; /* max columns */
column-gap: 1rem; /* space between columns */
}
.card {
break-inside: avoid; /* to prevent split to next column */
margin-bottom: 1rem; /*space below a card (gap only works between columns) *
}
.cards {
column-width: 15rem; /* ideal width */
column-count: 3; /* max columns */
column-gap: 1rem; /* space between columns */
}
.card {
break-inside: avoid; /* to prevent split to next column */
margin-bottom: 1rem; /*space below a card (gap only works between columns) *
}
but do remember, columns will fill top to bottom, left to right. So the order might not be what you want
Want results from more Discord servers?
Add your server