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