Отзывчиво отцентрируйте сетку карточек на странице и выровняйте карточки слева - PullRequest
Новая
       5

Отзывчиво отцентрируйте сетку карточек на странице и выровняйте карточки слева

0 голосов
/ 23 февраля 2020

У меня сетка карточек, и я хочу выровнять центр сетки по странице и выровнять карточки слева по сетке, адаптивно приспосабливаясь к экранам разных размеров.

Скажите, если есть 10 карточек и размер экрана таков, что только 4 карты будут помещаться в ряд, тогда в первом и втором рядах будет по 4 карты в каждой, а в третьем ряду 2 карты будут выровнены по левому краю. И интервал по обеим сторонам сетки будет равномерно распределен.

Я попытался обернуть Grid в div, но это не удалось, поскольку Grid занимал 100% ширины экрана. Я попытался установить ширину Grid на min-content, но тогда в каждой строке осталась только 1 карта. Если я установлю Grid выровнять по центру, конечные карты в последнем ряду будут центрированы.

РЕДАКТИРОВАТЬ: следующий код, который я имею. MyCard.tsx является компонентом Card, а CardList.tsx является компонентом div / Grid.

MyCard.tsx 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    card: {
      minWidth: 325,
      marginBottom: '1vh',
      marginLeft: '0.5vw',
      marginRight: '0.5vw',
      backgroundColor: theme.palette.background.paper,
      color: theme.palette.secondary.contrastText,
      boxShadow: '3px black',
    },
    media: {
      height: 170,
    },
    cardContent: {
      padding: '5px 15px',
      height: 80,
    },
})

const MyCard: React.FC<MyCardProp> = (props: MyCardProp) => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)',
  })
  const theme = useTheme()
  const classes = useStyles(theme

  return (
    <Card className={classes.card}>
    <CardMedia
        className={classes.media}
        image={props.imageURL}
    />
    <CardContent className={classes.cardContent}>
        <Typography gutterBottom variant="h5" component="h2">
        {props.title}
        </Typography>
        <Typography variant="body2" color="textSecondary" component="p">
        {props.description}
        </Typography>
        </CardContent>
        <CardActions
        className={classes.bottomBar}
        onClick={() => {
            // Do something here.
        }}
        disableSpacing
        >
        <IconButton>
        <Typography className={classes.bottomBarText} variant="h5">
            {props.title}
        </Typography>
        <ArrowForwardIcon />
        </IconButton>
    </CardActions>
    </Card>
  )
}

CardList.tsx 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    grid: {
      marginTop: 20,
      overflowX: "auto",
      flexGrow: 0,
    },
    greyText: {
      color: "#666666",
    ard
  })
)

const CardList: React.FC<CardListProps> = (props: CardListProps) => {
  const theme = useTheme()
  const classes = useStyles(theme)

  const cards = useSelector<RootState, Card[]>(
    (state: RootState) => state.cards.data
  )

  return (
    <div className={classes.root}>
      <Grid
        container
        className={classes.grid}
        wrap={"nowrap"}
        direction={props.direction}
      >
      {cards.length ? (
        cards.map((card, i) => {
          return (
            <MyCard
              data={card.data}
            />
          )
       }) : null}
    </div>
  )
}

Заранее спасибо за любые советы.

1 Ответ

0 голосов
/ 23 февраля 2020

Я наконец наткнулся на еще одну запись , которая решает проблему.

Ключ заключается в том, чтобы добавить следующий стиль в контейнер Grid. 

display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 10px;
justify-content: center;
align-content: flex-start;
margin: 0 auto;
text-align: center;
margin-top: 10px;

В частности, grid-template-columns: repeat(auto-fill, 100px); сделал трюк, где 100px должен быть желаемой шириной столбца.

...