Haciendo responsivo nuestro proyecto: rentas destacadas

Yo siento que es mucho mejor usar Grid para este tipo de casos. No siempre todo se debe resolver con Flex.

Adjunto mi código de cómo organicé todo con grid tanto para la version mobile como desktop simplemente indicando que en mobile es 1 sola columna y en version lg 5 columnas y 2 filas.
Con la propiedad de span(row o col) por ejemplo le dices a un div que se expanda, como es el caso de Los Angeles que toma el alto de 2 filas.

<div id="trending-stays" class="p-6 h-full w-full">
        <p class="text-3xl text-primary font-semibold">Trending Stays</p>
        <div
          class="w-full h-full flex flex-col space-y-4 items-center justify-center mt-6"
        >
          <div
            class="w-full h-96 bg-chicago bg-cover rounded-xl lg:h-[38rem] lg:text-right lg:bg-center lg:pt-12"
          >
            <p class="card-title">Chicago</p>
            <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
              2 rooms, bathroom and kitchen.
            </p>
          </div>
          <div
            class="w-full h-full grid grid-cols-1 lg:grid-cols-5 lg:grid-rows-2 lg:place-items-center lg:place-content-stretch gap-4"
          >
            <div
              class="w-full h-96 bg-LA bg-cover rounded-xl lg:row-span-2 lg:col-span-2 lg:h-[49rem] lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Los Angeles</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                4 rooms, 3 bathrooms, kitchen and private pool.
              </p>
            </div>
            <div
              class="w-full h-96 bg-miami bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Miami</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                3 rooms, 2 bathrooms, kitchen and amazing sea view.
              </p>
            </div>
            <div
              class="w-full h-96 bg-bali bg-cover rounded-xl lg:row-span-1 lg:col-span-3 lg:text-right lg:bg-center lg:pt-12"
            >
              <p class="card-title">Bali</p>
              <p class="text-sm pl-8 text-white mr-24 lg:mr-8 lg:text-base">
                2 rooms, 2 bathrooms, kitchen and private pool.
              </p>
            </div>
          </div>
        </div>
      </div>

La verdad fue que me enredé bastante haciéndolo con los <div>, así que lo hice con grid.
Por si alguien le pasa igual, comparto mi código

<div id="rentas_destacadas" class="h-full w-full px-6">
    <p class="text-3xl text-primary font-semibold pb-6 mt-6">
        Rentas destacadas
    </p>
    <div
        class="w-ful h-full grid grid-cols-1 lg:grid-cols-2 lg:place-items-center gap-4 lg:place-content-stretch"
    >
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:col-span-2"
        >
            <img
                class="object-cover h-full w-full"
                src="./img/chicago.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Chicago</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, baño y cocina
                </p>
            </div>
        </div>
        <div
            class="relative w-full h-96 rounded-lg overflow-hidden lg:row-span-2 lg:h-[49rem]"
        >
            <img class="object-cover h-full w-full" src="./img/LA.jpg" alt="" />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Los Angeles</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, baño y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/miami.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Miami</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, baño y cocina
                </p>
            </div>
        </div>
        <div class="relative w-full h-96 rounded-lg overflow-hidden">
            <img
                class="object-cover h-full w-full"
                src="./img/bali.jpg"
                alt=""
            />
            <div class="absolute top-0 left-0">
                <p class="text-3xl px-8 pt-8 pb-2 font-semibold text-light">Bali</p>
                <p class="text-sm pl-8 text-light mr-24">
                    2 habitaciones, baño y cocina
                </p>
            </div>
        </div>
    </div>
</div>

Y también utilice etiquetas <img> para las imágenes en lugar de clases bg-“nombre_imagen.jpg”.

Sección rentas destacadas de archivo index.html:

<div class="px-6 w-auto lg:px-6" id="rentas_destacadas">
            <p class="text-3xl text-primary font-semibold pb-6 mt-2">Rentas destacadas</p>
            <div class="w-full h-full flex flex-col items-center justify-center">
                <div class="w-full h-96 bg-chicago bg-cover rounded-xl mb-6 lg:bg-center">
                    <p class="CardTitle lg:text-b">Chicago</p>
                    <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, baño y cocina</p>
                </div>
                <div class="lg:flex lg:h-full lg:w-full lg:space-x-4">
                    <div class="w-full h-96 bg-LA bg-cover rounded-xl mb-6 lg:h-auto">
                        <p class="CardTitle">Los Angeles</p>
                        <p class="text-sm pl-8 text-white mr-24 lg:text-lg">3 habitaciones, 2 baños, cocina y excelente vista al mar.</p>
                    </div>
                    <div class="h-full w-full">
                        <div class="w-full h-96 bg-miami bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Miami</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">4 habitaciones, 3 baños, cocina y piscina privada</p>
                        </div>
                        <div class="w-full h-96 bg-bali bg-cover rounded-xl mb-6">
                            <p class="CardTitle">Bali</p>
                            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 habitaciones, baño, cocina y piscina privada</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Me paso que cuando cree el div que encierra las 3 ciudades, la profesora dijo que le pusiera el atributo hidden para que no interfiriera con el responsive mobile, no es necesesario poner el hidden, por que con los atributos lg: no se altera la vista mobile. cuando lo puse en mobile no veia las 3 tarjetas, y me tire siempre un tiempo descifrando que fue.

En mi caso usé grid y para mantener las imágenes más verticales que horizontales (porque usé el concepto de experiencias en vez de hoteles) hice 3 columnas. Dejo mi código abajo

    <!-- Experiences -->
    <div id="experiences" class="p-4 md:max-w-screen-xl m-auto">
        <h2 class="Title">Top Experiences</h2>
        
        <div class="w-full h-full mt-10 mb-10 grid grid-cols-1 md:grid-cols-4 md:place-items-center gap-4 items-center justify-center">
            
            <!-- Exp Card 1-->
            <div class="ExperienceCard bg-expBorabora md:bg-expBoraboraLg md:h-[49rem] md:row-span-2 md:col-span-2">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Swim with Sharks and Rays</p>
                    <p class="text-white">Bora Bora</p>
                </div>
            </div>
            <!-- / Exp Card 1-->
            <!-- Exp Card 2-->
            <div class="ExperienceCard bg-expYellowknife md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Intimate Aurora Tour</p>
                    <p class="text-white">Canada</p>
                </div>
            </div>
            <!-- / Exp Card 2 ->
            <!-- Exp Card 3 -->
            <div class="ExperienceCard bg-expFrance hidden md:block md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Wine Tasting in Burgundy</p>
                    <p class="text-white">France</p>
                </div>
            </div>
            <!-- / Exp Card 3 ->
            <!-- Exp Card 4 -->
            <div class="ExperienceCard bg-expCalafate md:h-96 md:row-span-1 md:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Trakking Perito Moreno</p>
                    <p class="text-white">Argentina</p>
                </div>
            </div>
            <!-- / Exp Card 4 ->
            <!-- Exp Card 5 -->
            <div class="ExperienceCard bg-expCapadocia hidden md:block md:h-96 md:row-span-1 mdlg:col-span-1">
                <div class="w-full h-1/2 bg-gradient-to-t from-slate-900 rounded-3xl bottom-0 absolute"></div>
                <div class="absolute bottom-2 p-6">
                    <p class="text-white text-2xl font-bold">Hot Air Balloons</p>
                    <p class="text-white">Capadocia</p>
                </div>
            </div>
            <!-- / Exp Card 5 -->
            
                </div>
                
            </div>
            <!-- / Experiences -->

Estuve probando con grid y la verdad aparte de ser más fácil hay mucho menos código! Ya que no se necesitan de ‘divs’ extra.

Estoy generando mi proyecto con ViteJS+ReactJS+TailwindCSS, tuve que adaptar esta sección entre Flex y Grid 😆😁

CSS

.Featured {
  @apply w-full h-full flex flex-col items-center justify-center space-y-4 md:flex-row md:flex-wrap lg:grid lg:grid-cols-5 lg:grid-rows-3 lg:gap-4 lg:space-y-0;
}
.Card__featured {
  @apply w-full h-96 bg-chicago bg-cover rounded-xl md:w-3/5 lg:w-full lg:bg-center lg:col-span-3;
  &:nth-child(1) {
    @apply md:w-full lg:col-span-5;
  }
  &:nth-child(2) {
    @apply lg:col-span-2 lg:row-span-2 lg:h-full lg:w-full;
  }
  p:nth-child(1) {
    @apply text-3xl px-8 pt-8 pb-2 rounded-lg flex-none font-bold text-white lg:pt-24;
  }

  p:nth-child(2) {
    @apply text-sm pl-8 text-white mr-24 font-semibold;
  }  
}

MUCHACHOS agreguen a sus clases solo lo que aqui esta agregado con LG y con eso ya tendran todo en grid y sin mucho codigo 😄

<div class="w-full h-auto flex flex-col space-y-4 items-center justify-center lg:grid lg:grid-cols-2 lg:grid-rows-3 lg:gap-3">
                <div class="BigCard bg-chicago lg:bg-center lg:col-span-2 lg:row-span-1">
                    <p class="BigCardTitle">Chicago</p>
                    <p class="BigCardDescription">2 dorms, 1 bathroom and kitchen</p>
                </div>
                <div class="BigCard bg-europe">
                    <p class="BigCardTitle">Europe</p>
                    <p class="BigCardDescription">3 dorms, 2 bathroom, courtyard and kitchen</p>
                </div>
                <div class="BigCard bg-iceland lg:col-span-1 lg:row-span-3 lg:h-full">
                    <p class="BigCardTitle">Iceland</p>
                    <p class="BigCardDescription">1 dorms, 1 bathroom and kitchen</p>
                </div>
                <div class="BigCard bg-switzerland">
                    <p class="BigCardTitle">Switzerland</p>
                    <p class="BigCardDescription">2 dorms, 2 bathroom and kitchen</p>
                </div>
            </div>

tailwind simplifica incluso el uso de grid que es algo complejo cuando dejas de maquetar en un tiempo

Me uno al Team-Grid

<div id="rentas_destacadas" class="px-6 h-full w-full lg:px-6">
      <p class="text-3xl text-primary font-semibold pb-6 mt-6">Rentas Destacadas</p>
      <div class="w-full h-96 bg-red-200 bg-chicago bg-cover bg-fixed rounded-xl mb-8 lg:bg-center">
        <p class="CardTitle lg:text-black">Chicago</p>
        <p class="text-sm pl-8 text-white mr-24 lg:text-lg lg:text-black">2 habitaciones, baño y cocina</p>
      </div>
      <div class="lg:grid lg:grid-cols-2 lg:space-x-6 lg:space-y-0 space-y-6">
        <div>
          <div class="w-full h-96 lg:h-full bg-LA bg-cover bg-fixed rounded-xl">
            <p class="CardTitle">Los Ángeles</p>
            <p class="text-sm pl-8 text-white mr-24 lg:text-lg">4 rooms, 3 bathrooms, kitchen and private pool.</p>
          </div>
        </div>
        <div>
          <div class="h-full w-full space-y-6">
            <div class="w-full h-96 bg-miami bg-cover bg-fixed rounded-xl ">
              <p class="CardTitle">Miami</p>
              <p class="text-sm pl-8 text-white mr-24 lg:text-lg">3 rooms, 2 bathrooms, kitchen and amazing
                sea view.</p>
            </div>
            <div class="w-full h-96 bg-bali bg-cover bg-fixed rounded-xl ">
              <p class="CardTitle">Bali</p>
              <p class="text-sm pl-8 text-white mr-24 lg:text-lg">2 rooms, 2 bathrooms, kitchen and private
                pool.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

vi el video y entiendo lo que la maestra quiere lograr, pero me parecía muy tedioso hacerlo con flex, cuando esta es una de esas situaciones donde grid debe ser utilizado. A cualquier que lo vea este comentario, le recomiendo intente ver la documentación de tailwind sobre grid y lo aplique al proyecto. Aqui les dejare mi implementación, la cual fue muy sencilla, incluso mas que hacerlo con cajitas usando flex.

<div class="px-2 h-auto w-full" id="rentas_destacadas">
        <p class="text-3xl text-primary font-semibold pb-6 mt-6">
          Rentas Destacadas
        </p>
        <div
          class="sm:flex w-full h-auto sm:flex-col space-y-6 lg:space-y-0 sm:items-center sm:justify-center lg:grid lg:grid-cols-3 lg:grid-rows-3 lg:gap-4"
        >
          <div class="w-full h-96 bg-chicago bg-cover rounded-xl lg:col-span-3 lg:row-span-1 lg:mt-0">
            <p class="CardTitle">Chicago</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, baño y cocina
            </p>
          </div>
          <div class="w-full h-96 bg-LA bg-cover rounded-xl lg:row-start-2 lg:row-end-4 lg:h-full">
            <p class="CardTitle">Los Angeles</p>
            <p class="text-sm pl-8 text-black mr-24">
              4 habitaciones, 3 baños, cocina y piscina privada
            </p>
          </div>
          <div class="w-full h-96 bg-miami bg-cover rounded-xl lg:col-span-2 lg:row-span-1">
            <p class="CardTitle">Miami</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, baño, cocina y una asombrosa vista
            </p>
          </div>
          <div class="w-full h-96 bg-bali bg-cover rounded-xl  lg:col-start-2 lg:col-end-4">
            <p class="CardTitle">Bali</p>
            <p class="text-sm pl-8 text-black mr-24">
              2 habitaciones, 2 baños, cocina y piscina privada
            </p>
          </div>
        </div>
      </div>

Aqui se podria usar una directiva @apply para el texto dentro de las cards y asi no tener que modificar uno a la vez

Esta muy tedioso hacerlo con flex.

Para los que les interese ver un poco más acerca de como trabajar con grid en tailwind pueden verlo aquí CSS Grid – What’s new in Tailwind CSS

Les dejo la opcion con grid de la manera mas facíl que vi:

<aside className='flex flex-col gap-9 lg:grid lg:grid-cols-2 '>
            <article className='flex lg:col-span-1 row-span-2'>
              <picture className='w-full h-[400px] px-6 py-12 bg-chicago bg-cover bg-center rounded-2xl shadow-custom lg:h-auto'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Chicago</h3>
                <p className='text-base py-3'>2 rooms, bathroom and kitchen.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-1 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-LA bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Los Angeles</h3>
                <p className='text-base py-3'>4 rooms, 3 bathrooms, kitchen and private pool.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-1 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-miami bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Miami</h3>
                <p className='text-base py-3'>3 rooms, 2 bathrooms, kitchen and amazing sea view.</p>
                </div>
              </picture>
            </article>
            <article className='flex lg:col-span-2 lg:row-span-1'>
              <picture className='w-full h-[400px] px-6 py-12 bg-bali bg-cover bg-center rounded-2xl shadow-custom'>
                <div className='text-white w-52 flex flex-col'>
                <h3 className='text-xl font-bold'>Bali</h3>
                <p className='text-base py-3'>2 rooms, 2 bathrooms, kitchen and private pool.</p>
                </div>
              </picture>
            </article>
          </aside>

Hola a todos. Preferí utilizar CSS Grid para este caso en particular. Yo estoy utilizando la versión de TW 3.3.3.
El resultado fue:
![Mi resultado implementando Grid](

• Lo que hice fue definir en el contenedor padre las reglas:
  grid grid-cols-1 grid-rows-4 gap-4

• Para expandir los hijos utilice:
  Para la imagen principal: md:col-span-2 md:row-span-2

• Para la imagen de los Angeles:
  md:row-span-2

Espero les ayude.

Demasiados div para mi gusto, está mejor usar grid…

Hola a todos, yo tambien hice la seccion de trending stays con grid. Use propiedades como col-start-number, col-end-number, row-start-number y row-end-number. No estoy seguro pero por lo que investigue, entiendo que en tailwind no se puede usar la propiedad grid-area. De hecho si van a tailwind no se ve esta propiedad. Les traigo un link en donde haciendo unas modificaciones en el archhivo tailwind.config. se puede habilitar esta propiedad. Espero que le sirva a alguien.

(https://savvywombat.com.au/tailwind-css/grid-areas/)

Concuerdo con los demás, es mucho más eficiente y fácil hacerlo con grid, aplicando row-span-{x} y col-span-{x}