question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Equal height items

See original GitHub issue

What 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:closed
  • Created 6 years ago
  • Comments:17 (3 by maintainers)

github_iconTop GitHub Comments

126reactions
afc163commented, Feb 1, 2018

I don’t think we need this, the height of children should leave to children’s content or it’s style.

45reactions
alvincommented, Oct 28, 2018

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

image
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found