Поле автоматической структуры divs в свободном пространстве

#javascript #reactjs

Вопрос:

Основная идея состоит в том, чтобы получить ширину и высоту из divs (блоков) из серверной части, а затем я хочу функцию или что-то в react, что структурирует страницу следующим образом.

Я обнаружил, что это имя Mansory, я хочу сделать его таким, как оно.

Иногда большое поле (упоминания) может оставаться в правом верхнем углу. Я хочу, чтобы маленькие ящики занимали пустое пространство. Я думал об использовании таблиц для его структурирования, но я не могу понять, как создать функцию для автоматического и динамического выполнения этого.

Итак, идея в том, чтобы никогда не иметь свободного места, там всегда будет поле.

Я думаю, вы, ребята, поняли идею.

Спасибо.

Ответ №1:

Для этого вы можете использовать CSS flexbox. вероятно, подойдет настройка flex-wrap: wrap в контейнере и использование flex-grow: #desiredSize для элементов.

вот отличное руководство по css-трюкам: Полное руководство по Flexbox

1. Я хочу сделать что-то вроде Mansory, вы знаете? Я думаю, что flex — это не лучший способ, я думаю..

2. Вы имеете в виду марку тюнинга автомобилей Mansory?! Я не знаю, что именно вы имеете в виду, но если у вас есть предположение о решении и вы не знаете, как его реализовать, я мог бы помочь.

Ответ №2:

Я не уверен, что получение размеров ширины и высоты из серверной части является хорошей идеей, это не приведет к созданию адаптивного веб-сайта. Для вашего варианта использования CSS может быть лучшим решением. Вы можете использовать либо Flexbox, либо CSS Grid. На мой взгляд, подобный экран может очень хорошо работать с CSS-сеткой и областями шаблонов. Взгляните на это.