Карты той же высоты в пользовательском интерфейсе материала

Question

Попытка иметь 3 горизонтальные карты, но одинаковой высоты и быть отзывчивыми.

Как

Карта A | Карта B | Карта C

Answer 1

Вы можете использовать компонент Grid для достижения этой цели:

<Grid container alignItems="stretch">

  <Grid item component={Card} xs>
    <CardContent>
       // Card A content
    </CardContent>
    <CardActions>
      // Card A actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>

  <Grid item component={Card} xs>
    <CardContent>
      // Card B content
    </CardContent>
    <CardActions>
      // Card B actions
    </CardActions>
  </Grid>
</Grid>

alignItems="stretch" (который на самом деле указывать не нужно, поскольку растяжение является значением по умолчанию) будет иметь эффект растяжения высоты каждого элемента, когда направление изгиба равно row (которое также является направлением по умолчанию) , Вы можете увидеть этот ответ для более подробной информации: https://stackoverflow.com/a/46956430/253693

Атрибут xs на каждом Grid item использует auto-layout , инструктируя каждую карту в равной степени использовать доступную ширину.

Есть еще несколько элементов очистки, к которым вы могли бы обратиться, а именно, используя withStyles HOC , чтобы применить класс к каждому компоненту Card, который фиксирует интервалы и гарантирует, что CardActions остаются в нижней части карточка, независимо от высоты CardContent:

const styles = {
  card: {
    // Provide some spacing between cards
    margin: 16,

    // Use flex layout with column direction for components in the card
    // (CardContent and CardActions)
    display: "flex",
    flexDirection: "column",

    // Justify the content so that CardContent will always be at the top of the card,
    // and CardActions will be at the bottom
    justifyContent: "space-between"
  }
};

Затем вы примените эти стили к каждой карточке следующим образом:

<Grid item component={Card} xs className={classes.card}>

Вот рабочий пример, который объединяет все: https://codesandbox.io/embed/r9y95vr5n