Привет, я разрабатываю систему сетки в NextJS, используя Tailwind. У меня возникли проблемы с автоматическим определением размера сетки в соответствии с размером родительского элемента.
Ниже приведены два изображения, которые помогут передать мой смысл.
<div className = "bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className = "min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className = "flex justify-between text-sm gap-12">
<div className = "sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className = "sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className = "sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className = "bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className = "grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className = "bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className = "grid grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className = "p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
</div>
Результат ответа и рефакторинг
Благодаря помощи MagnusEffect я смог решить проблему. Закончилось тем, что он изменил некоторые стили и установил отступы, пробелы и другие незначительные изменения, наведение сработало фантастически!
Попробуйте h-screen
или h-fit
или вы можете добавить собственный размер h-[]
в квадратных скобках вы можете добавить любой размер (px, vh) и т. д.
Вы можете использовать свойства flex
для создания следующих систем сетки, подобных этой.
<script src = "https://cdn.tailwindcss.com"></script>
<div class = " border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
<div class = " p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
<div class = " border-purple-500 border-2 h-20 ">Av</div>
<div class = " border-purple-500 border-2 h-72">ot</div>
</div>
<div class = " p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
<div class = "p-3 border-purple-500 border-2 h-48">Video</div>
<div class = "p-3 border-purple-500 border-2 h-24">Description</div>
<div class = "p-3 border-purple-500 border-2 h-48">Github, Socials</div>
</div>
<div class = " p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
<div class = "flex flex-col space-y-2 w-1/2 h-full">
<div class = "border-purple-500 border-2 h-full p-4">Projects</div>
<div class = "border-purple-500 border-2 h-full p-4">Empty </div>
</div>
<div class = "p-6 border-purple-500 border-2 w-1/2 h-full ">
Study/Work
</div>
</div>
</div>
Примечание:
- Замените
class=
наclassName=
в Reactjs.- Посмотреть демо на полной странице
Рад узнать, что я могу вам помочь
Спасибо, Магнус, это очень помогло! Я разместил изображение отредактированной версии с некоторыми изменениями, вы сделали мой день :)