Блог

Я целую вечность боролся за то, чтобы мой адаптивный макет работал! Но все выходит из-под контроля, когда я применяю интервал к контейнеру сетки с помощью class=spotlight . Как я могу применить интервал к желобам (т. Е. Между элементами сетки в сетке контейнера spotlight), но не к полям (т. Е. Вне сетки). Вот мой код:

 import React from "react";
import { Grid, makeStyles, Typography } from "@material-ui/core";
import MasterLayout from "../components/MasterLayout";
import ContentThumbnail from "../components/ContentThumbnail";
import ContentList from "../components/ContentList";

const useStyles = makeStyles((theme) => ({
  masterLayout: {
    padding: theme.spacing(3),
  },
  spotlight: {},
}));

const DefaultDashboard = ({ padding }) => {
  const classes = useStyles();
  return (
    <MasterLayout>
      {/*Top row with right bar */}
      <Grid
        container
        className={classes.masterLayout}
        spacing={3}
        alignItems="flex-start"
      >
        {/* Spotlight section */}
        <Grid container xl={8} lg={12} item className={classes.spotlight}>
          <Grid item xs={12}>
            <Typography variant="h3">Spotlight</Typography>
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
        </Grid>
        {/* List section 1 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 2</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 2 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 2</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 3 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 3</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 4 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 4</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
      </Grid>
    </MasterLayout>
  );
};

export default DefaultDashboard;
 

Большое спасибо,

Кэти

TL; DR: переопределите стиль элементов вашей сетки:

 const useStyles = makeStyles((theme) => ({
//...
  gutter:{
    marginLeft: 80, // or something
    'amp;:first-child':{
      marginLeft: 0,
    }
  }
}));
//...
<Grid ... item classes={{item:classes.gutter}}>
 

Следующие элементы сетки имеют желоба (желоба шириной 80 пикселей среди синих контуров, но первые):

NL; PR: Взгляните на этот pastebin. Я посмотрел на Grid API, объект classes позволяет настраивать внутренние стили компонента. Я добавил псевдокласс, чтобы обеспечить некоторый интервал для всех дочерних элементов, кроме первого, добавив таким образом внутренние желоба.

Возможно, я вас не правильно понял, но вы можете попытаться что-то сделать с помощью реквизита ‘alignItems’ (изменить на stretch) или попытаться использовать вместо этого ‘alignContent’.

Эта ссылка может быть полезной.

Извините, если это не то, что вам нужно, возможно, будет проще помочь с какой-нибудь демонстрацией песочницы.