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

описание материал дизайн спецификации:

списки сетки являются альтернативой стандартным списковым представлениям. Списки сетки являются отличается от сеток, используемых для макетов и других визуальных презентаций.

Если вы ищете очень легкую библиотеку компонентов сетки, я использую React-Flexbox-Grid реализация flexboxgrid.css в React.

на React-Flexbox-Grid играли хорошо с обоими материал-ui и react-toolbox (альтернативные материалы).

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

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

теперь, с некоторыми другими вычислениями, вы можете легко разделить ваши компоненты на странице.

дальнейшее чтение на flex

Я надеюсь, это не слишком поздно, чтобы дать ответ.

Я также искал простой, надежный, гибкий и настраиваемый bootstrap, такой как react grid system, для использования в моих проектах.

лучшее, что я знаю react-pure-grid https://www.npmjs.com/package/react-pure-grid

react-pure-grid дает вам возможность настраивать каждый аспект вашей сетевой системы, в то же время он имеет встроенные значения по умолчанию, которые, вероятно, подходят для любого проект

использование

npm install react-pure-grid --save

-

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

путь, который я делаю, это перейти к http://getbootstrap.com/customize/ и только проверьте "grid system" для загрузки. Есть bootstrap-theme.css и bootstrap.css в загруженных файлах, и мне нужно только последнее.

таким образом, я могу использовать сеточную систему Bootstrap, со всем остальным из материала UI.

Я просто использую https://react-bootstrap.github.io/ для адаптивного макета и материала-ui для всех компонентов

Мне было трудно найти структуру пользовательского интерфейса, которая будет реализовывать стандарты Material Design для адаптивного поведения, поэтому я создал два пакета, которые реализуют сеточную систему для Material Design:

1. рамки CSS:материал-отзывчивый-сетки
2. набор компонентов React, реализующих эту структуру:react-material-responsive-grid.

эти пакеты соответствуют стандартам для отзывчивый Интерфейс изложено Google. Все размеры видового экрана, указанные в их стандартах, поддерживаются с учетом правильных желобов, рекомендуемого количества столбцов и даже поведения макета, превышающего 1600 dp. Он должен вести себя так, как рекомендуется для каждого устройства в Метрики Устройства руководство.

Это старый вопрос, но google приводит меня сюда. После небольшого поиска я нашел хороший пакет: https://www.npmjs.com/package/react-grid-system

Я думаю, что это самый лучший, простой в использовании и легкий.