Kevin Powell - Community•15mo ago

Gaps in a grid make an element of the grid overflow

As you can see, the grid which contains the image and the div with 2 text blocks has some gaps, and for this reason text overflows. Any idea how can I prevent it?

6 Replies

Jochem•15mo ago

share your code 🙂 check out #how-to-ask-good-questions for some tips on how to do that most efficiently

.suhaylmvOP•15mo ago

Oh right

   <div class="max-w-[415px] md:max-w-[850px] flex flex-col md:gap-3 lg:max-w-[990px] xl:max-w-[1050px] 2xl:max-w-[1150px] 2xl:gap-6 3xl:max-w-[1250px]">
            <div class="font-secondary text-4xl font-semibold text-center">
              <p class="">1</p>
              <h3 class="">Estrategia</h3>
            </div>

            <div class="flex flex-col md:grid md:grid-cols-[1fr_1fr] md:gap-5 items-center lg:gap-6 lg:grid-cols-[52%_48%] xl:gap-14 2xl:gap-14  3xl:gap-16 ">
              <Image src={processMeeting} alt="Dos personas en un meeting" class="justify-self-end" />
              <div class="flex flex-col gap-6 lg:gap-8 xl:gap-10 2xl:gap-14 3xl:gap-16 w-auto">
                <div class="flex flex-col gap-0.5 xl:gap-2 2xl:gap-2.5">
                  <FaSolidSitemap size="41" class="mb-2 hidden lg:inline-block" />
                  <h4 class="font-semibold text-2xl xl:text-[28px] 2xl:text-3xl 3xl:text-[34px]">Sitemap</h4>
                  <p class="xl:text-lg text-accentSecondary-700 2xl:text-xl 3xl:text-[22px] 3xl:leading-normal">
                    Tendras una pagina web con un diseno impecable y unico, que
                    transmitira a la perfeccion la esencia, vision y
                    personalidad de tu club.
                  </p>
                </div>
                <div class="flex flex-col gap-0.5 xl:gap-2 2xl:gap-2.5">
                <FaSolidPenToSquare size="39" class="mb-2 hidden lg:inline-block" />
                <h4 class="font-semibold text-2xl xl:text-[28px] 2xl:text-3xl 3xl:text-[34px]">Copywriting</h4>
                <p class="xl:text-lg text-accentSecondary-700 2xl:text-xl 3xl:text-[22px] 3xl:leading-normal">
                  Tendras una pagina web con un diseno impecable y unico, que
                  transmitira a la perfeccion la esencia, vision y personalidad
                  de tu club.
                </p>
</div>
              </div>
            </div>
         </div>

   <div class="max-w-[415px] md:max-w-[850px] flex flex-col md:gap-3 lg:max-w-[990px] xl:max-w-[1050px] 2xl:max-w-[1150px] 2xl:gap-6 3xl:max-w-[1250px]">
            <div class="font-secondary text-4xl font-semibold text-center">
              <p class="">1</p>
              <h3 class="">Estrategia</h3>
            </div>

            <div class="flex flex-col md:grid md:grid-cols-[1fr_1fr] md:gap-5 items-center lg:gap-6 lg:grid-cols-[52%_48%] xl:gap-14 2xl:gap-14  3xl:gap-16 ">
              <Image src={processMeeting} alt="Dos personas en un meeting" class="justify-self-end" />
              <div class="flex flex-col gap-6 lg:gap-8 xl:gap-10 2xl:gap-14 3xl:gap-16 w-auto">
                <div class="flex flex-col gap-0.5 xl:gap-2 2xl:gap-2.5">
                  <FaSolidSitemap size="41" class="mb-2 hidden lg:inline-block" />
                  <h4 class="font-semibold text-2xl xl:text-[28px] 2xl:text-3xl 3xl:text-[34px]">Sitemap</h4>
                  <p class="xl:text-lg text-accentSecondary-700 2xl:text-xl 3xl:text-[22px] 3xl:leading-normal">
                    Tendras una pagina web con un diseno impecable y unico, que
                    transmitira a la perfeccion la esencia, vision y
                    personalidad de tu club.
                  </p>
                </div>
                <div class="flex flex-col gap-0.5 xl:gap-2 2xl:gap-2.5">
                <FaSolidPenToSquare size="39" class="mb-2 hidden lg:inline-block" />
                <h4 class="font-semibold text-2xl xl:text-[28px] 2xl:text-3xl 3xl:text-[34px]">Copywriting</h4>
                <p class="xl:text-lg text-accentSecondary-700 2xl:text-xl 3xl:text-[22px] 3xl:leading-normal">
                  Tendras una pagina web con un diseno impecable y unico, que
                  transmitira a la perfeccion la esencia, vision y personalidad
                  de tu club.
                </p>
</div>
              </div>
            </div>
         </div>

.suhaylmvOP•15mo ago

I'll send a screenshot too, I think this way it's easier to read code

Jochem•15mo ago

screenshots of code aren't as useful, can't copy paste them. The best solution is something live like on codepen or the tailwind playground

.suhaylmvOP•15mo ago

https://play.tailwindcss.com/HNZlifO1Zz

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

.suhaylmvOP•15mo ago

Ok I found a solution Instead of grid-cols-[52%_48%], grid-cols-[52fr_48fr] is better since it uses the amount of free space, instead of the whole size of the grid

Gaming

Programming

Gaps in a grid make an element of the grid overflow