26 Replies
how are they align like that
we're missing the
featureKey
and featureValue
class definitions to say for sure
but long story short: display: flex;
this is what i have
one card is effecting the height of other
I'm very confused, you were asking how the values are all lining up in the first screenshot
yeah i figured that out not i have this problem
right
sorry
answer's the same,
display: flex;
if you link the site, I can point to the propertieshow do i fix the issue with the height
share your own code in a codepen
its in react can we do that?
make a minimal example then, or use something else that can run react
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 stretchingnow its doing this
if you add this to
.cards
:
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 layoutsW3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
i found this i never heard of the properties its using in this example
is it old or what
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
the one i send is what i need and its not made using grid
.
how to make it use space how much it needs not more then that
you could do
but do remember, columns will fill top to bottom, left to right. So the order might not be what you want