Equal height items
See original GitHub issueWhat problem does this feature solve?
When using the Card component it would be great to add support for equal heights. Similarly, when using Row and Col, if we could add support for equal heights on all children of a Row item, it would solve a lot of layout issues.
What does the proposed API look like?
<Row equal-heights>
or similar
Issue Analytics
- State:
- Created 6 years ago
- Comments:17 (3 by maintainers)
Top Results From Across the Web
Equal Height Elements: Flexbox vs. Grid
For purely solving for equal height elements, the advantage of flexbox is the default axis immediately enables side-by-side columns, whereas ...
Read more >How To Create Equal Height Columns - W3Schools
When you have columns that should appear side by side, you'll often want them to be of equal height (matching the height of...
Read more >Equal height rows in a flex container - Stack Overflow
Equal height rows, however, are possible in CSS Grid Layout: Equal height rows in ... Same height for flex items in the flex-direction...
Read more >An equal height grid using Flexbox | Clearleft
Flex stretches items vertically by default, so it's easy to give items equal heights. This now offers control over the child elements, allowing...
Read more >Equal Height and Width Columns using Flexbox - CodePen
EQUAL HEIGHT COLUMNS WITH MARGINS IN MULTIPLE ROWS and VARIABLE NO OF BOXES ... Add display:flex, flex-wrap: wrap to the parent and give...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I don’t think we need this, the height of children should leave to children’s content or it’s style.
Using flexbox-enabled rows with type=“flex” and setting the height to 100% on the column contents worked well for me.
<Row gutter={16} type="flex">
https://ant.design/components/grid/#Row