Для сетки материального пользовательского интерфейса возможно ли динамическое изменение ширины столбца для элементов сетки - в одном контейнере?
Потому что иногда у меня есть 2 элемента сетки, которые должны отображаться в одной строке, а иногда у меня есть 4 элемента сетки, которые мне нужны в одной строке. Вот кодовое поле, верхний контейнер имеет два элемента сетки. Второй контейнер имеет 4 элемента сетки, и я хочу, чтобы они отображались в одной строке и имели одинаковую ширину (xs).
Вот песочница кода https://codesandbox.io/s/material-demo-forked-c09gtg?file=/demo.js
🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.
Автомакет
Автоматическая компоновка позволяет элементам равномерно распределять доступное пространство. Это также означает, что вы можете установить ширину одного элемента, а остальные автоматически изменят размер вокруг него.
Вам нужно только включить xs и не придавать ему никакого значения для каждого элемента сетки.
<Grid container spacing = {1}>
<Grid item xs>
<Item>first item</Item>
</Grid>
<Grid item xs>
<Item>second item</Item>
</Grid>
<Grid item xs>
<Item>third item</Item>
</Grid>
<Grid item xs>
<Item>fourth item</Item>
</Grid>
</Grid>