использование сетки css с материальными компонентами пользовательского интерфейса для получения адаптивного дизайна - PullRequest
Новая
       39

использование сетки css с материальными компонентами пользовательского интерфейса для получения адаптивного дизайна

0 голосов
/ 09 июля 2020

Я пытаюсь использовать сетку css, чтобы получить отзывчивый дизайн, используя приведенный ниже код, и использовал min-content и max-content для определения ширины элементов сетки. Но это не работает. Есть какие нибудь идеи как это починить? Вот демонстрационный код https://codesandbox.io/s/upbeat-chatterjee-6yk6l

Кстати, я знаю, что есть компонент <Grid>, но я бы хотел попробовать с сеткой CSS. 

import React from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";

function App() {
  return (
    <div
      style={{
        display: "grid",
        gridGap: 10,
        margin: 10,
        alignItems: "center",
        gridTemplateColumns:
          "repeat(auto-fill, minmax(min-content, max-content)"
      }}
    >
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
      <Button variant="contained" color="primary">
        Hello World
      </Button>{" "}
      <Button variant="contained" color="primary">
        Hello World
      </Button>{" "}
      <Button variant="contained" color="primary">
        Hello World
      </Button>{" "}
      <Button variant="contained" color="primary">
        Hello World
      </Button>
    </div>
  );
}
...