Высота сетки попутного ветра

Привет, я разрабатываю систему сетки в NextJS, используя Tailwind. У меня возникли проблемы с автоматическим определением размера сетки в соответствии с размером родительского элемента.

Ниже приведены два изображения, которые помогут передать мой смысл.

  1. Каркас макета контейнера и сетки. (Красный = обертка, розовый = макет, фиолетовый = сетки)

  1. Что мне удалось закодировать (я хочу изменить размер правых полей по высоте окна).

<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 я смог решить проблему. Закончилось тем, что он изменил некоторые стили и установил отступы, пробелы и другие незначительные изменения, наведение сработало фантастически!

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
123
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте 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.
  • Посмотреть демо на полной странице

Спасибо, Магнус, это очень помогло! Я разместил изображение отредактированной версии с некоторыми изменениями, вы сделали мой день :)

Mit 11.11.2022 19:59

Рад узнать, что я могу вам помочь

MagnusEffect 11.11.2022 20:33

Другие вопросы по теме