Блог

Я пытаюсь создать сеточную систему 8pt на основе css-сетки. Я использую компоненты react и style (не думаю, что это имеет большое значение), и у меня возникли некоторые проблемы с пониманием общего процесса размещения элементов.

Имейте в виду, что это для мобильных устройств(ионных), и меня не так волнует выравнивание рабочего стола.

Из-за этого я работаю только с пикселями/процентами.

Я планировал создать контейнер, компоненты строк и столбцов соответственно.

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

Это то, что пользователь будет делать следующим образом?

 lt;Containergt;  lt;Row s={8}gt;  lt;Col row={8} s={4}gt;  lt;GridItem start={2} end={3}gt;  lt;Button /gt;  lt;/GridItemgt;  lt;/Colgt;  lt;/Rowgt; lt;/Containergt;  

Или это решение.

 lt;Containergt;  lt;Row s={8}gt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col gt;lt;/Colgt;  lt;Col s={4} gt;  lt;GridItem start={2} end={3}gt;  lt;Button /gt;  lt;/GridItemgt;  lt;/Colgt;  lt;/Rowgt; lt;/Containergt;  

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

Мой первоначальный план состоял в том, чтобы захватить текущую ширину мобильных устройств (по вертикали) и убедиться, что она естественным образом делится на 8, а затем использовать проценты. Мне было интересно, правильно ли это направление для обработки стиля сетки 8pt.

Спасибо.