Форматировать сетку красиво

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

Я хочу отформатировать страницу следующим образом: 1-я сетка содержит 3 текстовых поля, одно под другим с соответствующим заголовком над всеми. 2-я сетка такая же, как и 3 других поля, а 3-я сетка содержит 7 текстовых полей, которые я хочу отобразить -> 3 в первом столбце, 2 во втором, 2 и последнем, все под одним заголовком.

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

Это мой код: (если у кого-то есть идея улучшить отображение, я более чем открыт, чтобы услышать об этом)

    <Grid container spacing = {24}>
      <Grid item sm = {3}> // First grid - contains 3 text fields
        <Typography variant = "subheading" gutterBottom color = "primary" >
          {labels.brokerGeneralDetails}
        </Typography>
        <Grid item sm = {10}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm = {2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm = {2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm = {1}>  // Second grid - contains 3 text fields
        <Typography variant = "subheading" gutterBottom color = "primary">
          {labels.brokerAccountDetails}
        </Typography>
        <Grid item sm = {6}>
          <TextField
           ...
          />
        </Grid>
        <Grid item sm = {3}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm = {2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm = {3}>  // Third grid - Should contain 7 text fields in 3 columns
        <Typography variant = "subheading" gutterBottom color = "primary">
          {labels.brokerOtherDetails}
        </Typography>
        <Grid >
          <TextField
            ...
          />
        </Grid>
        <Grid item sm = {2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm = {1}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm = {1}> // Should be the second column
        <Grid>
          <TextField
            ...
          />
        </Grid>
        <Grid >
          <TextField
           ...
          />
        </Grid>
      </Grid>
      <Grid item sm = {1}> // Should be the third column
        <Grid>
          <TextField
          ...
          />
        </Grid>
        <Grid>
          <TextField
           ...
          />
        </Grid>
      </Grid>
    </Grid>

Я хочу, чтобы он отображался следующим образом:

                    Title3          Title2       Title1
       Txt6   Txt4   Txt1          Txt1         Txt1
       Txt7   Txt5   Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

Прямо сейчас это:

       Txt6   Txt4  Title3          Title2       Title1
       Txt7   Txt5   Txt1          Txt1         Txt1
                     Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

можно сюда прикрепить дизайн?

— 26.08.2018 15:39

Картинка текущего дисплея? @SakhiMansoor

— 26.08.2018 15:42

Нет, я имею в виду желаемый результат

— 26.08.2018 15:42

@SakhiMansoor Обновлено

— 26.08.2018 15:47

Я добавил ответ ниже. Надеюсь это поможет

— 26.08.2018 16:31

javascript reactjs grid jsx

26.08.2018 15:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

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

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width = "*"/>
        <ColumnDefinition Width = "*"/>
        <ColumnDefinition Width = "*"/>
        <ColumnDefinition Width = "*"/>
        <ColumnDefinition Width = "*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height = "*"/>
        <RowDefinition Height = "*"/>
        <RowDefinition Height = "*"/>
        <RowDefinition Height = "*"/>
    </Grid.RowDefinitions>
    <Label Grid.Column = "2" Content = "Title3" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "3" Content = "Title2" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "4" Content = "Title1" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "0" Grid.Row = "1" Content = "Txt6" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "1" Grid.Row = "1" Content = "Txt4" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "2" Grid.Row = "1" Content = "Txt1" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "3" Grid.Row = "1" Content = "Txt1" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "4" Grid.Row = "1" Content = "Txt1" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "0" Grid.Row = "2" Content = "Txt7" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "1" Grid.Row = "2" Content = "Txt5" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "2" Grid.Row = "2" Content = "Txt2" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "3" Grid.Row = "2" Content = "Txt2" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "4" Grid.Row = "2" Content = "Txt2" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "2" Grid.Row = "3" Content = "Txt3" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "3" Grid.Row = "3" Content = "Txt3" HorizontalAlignment = "Center" FontSize = "36"/>
    <Label Grid.Column = "4" Grid.Row = "3" Content = "Txt3" HorizontalAlignment = "Center" FontSize = "36"/>
</Grid>

Результат выглядит так: https://gyazo.com/b6768ab550ddac6685549c35e38b34e9

Вы также можете использовать Grid.ColumnSpan для охвата нескольких столбцов вашей сетки, если вы хотите центрировать заголовок над всеми 5 столбцами.

26.08.2018 16:03

Используйте alignItems в своей сетке: alignItems = "center"

<Grid container spacing = {24} alignItems = "center">

26.08.2018 16:11

Потратив некоторое время, я думаю, что сделал это: вот коды и ящик: https://codesandbox.io/s/ll507vypy7

код:

const styles = theme => ({
root: {
    flexGrow: 1
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 50
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className = {classes.root}>
        <Grid container>
          <Grid item container xs = {4}>
            <Grid item xs = {12}>
              <Typography variant = "subheading" gutterBottom color = "primary">
                Grid1
              </Typography>
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
          </Grid>
          <Grid item container xs = {4}>
            <Grid item xs = {12}>
              <Typography variant = "subheading" gutterBottom color = "primary">
                Grid2
              </Typography>
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
            <Grid item xs = {12}>
              <TextField className = {classes.textField} />
            </Grid>
          </Grid>
          <Grid container item xs = {4}>
            <Grid item xs = {12}>
              <Typography variant = "subheading" gutterBottom color = "primary">
                Grid3
              </Typography>
            </Grid>
            <Grid container item xs = {12}>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs = {12}>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs = {12}>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
              <Grid item xs = {4}>
                <TextField className = {classes.textField} />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

PS это МАТЕРИАЛ-UI

26.08.2018 16:27