#reactjs #tailwind-css
Вопрос:
Я пытаюсь создать сетку с разными размерами строк. поля должны быть фиксированными (по высоте и ширине), но вся сетка должна быть гибкой. Я имею в виду, например, что если я изменю зазор, края должны остаться прежними и не сдвигаться. Я протестировал это с помощью 1fr и в настоящее время исправил это. К сожалению, когда я сжимаю страницу, сетки становятся очень маленькими или наоборот. Я использую попутный ветер и реагирую.
Кто-нибудь знает, как реализовать что-то подобное?
Может быть, есть более простой способ.
tailwind.config.js
theme: { extend: { gridTemplateColumns: { 't5': 'repeat(5, 200px)', 't6': 'repeat(6, 166.0px)', 't7': 'repeat(7, 141.7px)', 't8': 'repeat(8, 123.5px)', 't9': 'repeat(9, 109.34px)', }, height: { p200: '200px', p166: '166px', p141_7: '141.7px', p123_5: '123.5px', p109_34: '109.34px', }, }, }, индекс.tsx
export default function Page() { const top20 = [ { id: "1", gridCols: "grid-cols-t5", gridCount: 20, height: "h-p200", } ]; const top40 = [ { id: "1", gridCols: "grid-cols-t5", gridCount: 10, height: "h-p200", }, { id: "2", gridCols: "grid-cols-t7", gridCount: 14, height: "h-p141_7", }, { id: "3", gridCols: "grid-cols-t8", gridCount: 16, height: "h-p120", }, ]; return ( lt;gt; lt;divgt; {top40.map((item) =gt; ( lt;gt; lt;div className={`mt-1 grid gap-1 ${item.gridCols}`}gt; {[...Array(item.gridCount)].map(() =gt; ( lt;div key={item.id} className={`bg-red-500 ${item.height}`}gt;1lt;/divgt; ))} lt;/divgt; lt;/gt; ))} lt;/divgt; lt;/gt; ); }