3 Cards 1 row where the center card is 1.5 times the size of the 1st and 3rd card.
Like the image, I want 3 divs stacked horizontally. 1st and 3rd div should be the same size but the 2nd (center) div should be a little bigger than the 1st and 3rd div.
I tried using
scale(1.5) on the 2nd div but then it over laps with the 1st and 3rd div. I thought about manually setting height on all three cards and giving the middle one a greater value that the corner cards but AFAIK it's not recommended to set height on things.
I am using tailwind with react, if it matters.
15 Replies
You could scale down the side ones to 0.75 an set the middle one to 1.25. (Sorry of my math is off, it is early)
The issue is that it shrinks the entire thing along the text and the content that's within the card. I don't want the content shrining
So the content of the three cards should be the same size and just the containing box should be bigger?
You could use a pseudo element to define the boxes area. That won’t affect the content itself. .
are the aspect-ratios the same. if yes, you could use grid
https://codepen.io/MarkBoots/pen/pomerQm
isn't setting aspect ratio on the grid children the same as setting height implicitly? basically your height will be the function of your width.
yes. the content should be the same size. I just want to put emphasis on the center card.
can you elaborate on how I can use pseudo elements for this? I have no clue what you're talking about here.
Basically a pseudo element on each card would define the background color or border (for example). The cards themselves would be exactly the same size.
https://codepen.io/cbolson/pen/zYQZMYp
nice solution. maybe even use a couple of vars to make it easier to adjust. something like this
that's a really neat solution. so it basically takes advandage of
insest to create more room inside the middle child.
thanks @MarkBoots @Chris
appreciate it.
Mark I didn't get to fork your codepen and I think you took it down. can you bring it back up for a day so I can fork it? Or maybe post the code here.Bear in mind that
inset is just short-hand for top, right, bottom, left.
So inset: 0; would be the same as
As these can have negative values, inset: -1.5rem; is the same as setting:
As Mark says, you could use custom properties to make the calculations automatic, I just didn't want to distract from the solution itself.
The pseudo element isn't actually creating more room, it is just making the background area look bigger. The cards themselves are exactly the same size.Why such a complex solution that is hard to read and understand?
@Chris Why not like this? https://jsfiddle.net/Lpondxw6/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I think its a bad idea using pseudo elements for major styles of the element
Just because you find it complex and hard to understand doesn't mean that it is.
Pseudo elements are an excellent solution for this type of thing as, if the are positioned absolutely, they don't affect the rest of the DOM.
With your solution the extra padding on the second element changes the whole layout.
For this very reason, pseudo elements are perfect for styling elements.
Most of the time it is no problem when it changes the layout imho. Even if your solution doesnt seem more complex to you, it is objectively definitely more complex than the solution with the padding
Anyway, it is great to give multiple solutions so that the OP can find one that suits their specific needs.
The OP specifically stated that the content should be the same size on all of the cards. Adding padding does not meet this requirement.