Início / coding / Perguntas / 77441660
Accepted
erics15
Asked: 2023-11-08 05:44:12 +0800 CST

Como obter 2 divs próximos um do outro na visualização responsiva no vento favorável usando grade

  • 772

Eu tenho essa marcação e só quero que esses dois divs fiquem próximos um do outro em uma visualização responsiva. Não tenho certeza do que estou perdendo aqui. Tentando manter a grade enquanto o topo pai controla as colunas. Então, na tela pequena, coloque-os um ao lado do outro, na tela MD e acima, mantenha-os como estão. Existem 3 colunas, mas incluí apenas uma por questões de brevidade.

Aqui está o jogo do vento favorável https://play.tailwindcss.com/VoNukJ0D7h

e meu código

  <div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
      <div>
        <span class=" font-bold">Some text that goes here </span>
          <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
            </span>
          </p>
        </div>
        <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
          </span>
          </p>
        </div>
      </div>

Obrigado!

tailwind-css

1 respostas

  1. Best Answer

    Você poderia considerar agrupar os elementos em um layout flexível horizontal como:

    <script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="flex">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>

    Ou usando um layout de grade de 2 colunas como:

    <script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="grid grid-cols-2">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>

    • 1

relate perguntas