Tailwind CSS - make image in flex bigger-CodePudding

I want to move a picture/row down using Tailwind CSS, in order to achieve this kind of image gallery: https://i.stack.imgur.com/MmPng.png

Here is what I have tried:

    <section >
        <div >
          <div >
            <div >
              <div >
                <img alt="gallery" 
                  src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (70).webp">
              </div>
              <div >
                <img alt="gallery" 
                  src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (72).webp">
              </div>
              <div >
                <img alt="gallery" 
                  src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (73).webp">
              </div>
            </div>
            <div >
              <div >
                <img alt="gallery" 
                  src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (74).webp">
              </div>
              <div >
                <img alt="gallery" 
                  src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (75).webp">
              </div>
            </div>
            <div >
                <div >
                  <img alt="gallery" 
                    src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (70).webp">
                </div>
                <div >
                  <img alt="gallery" 
                    src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img (72).webp">
                </div>
              </div>
          </div>
        </div>
      </section>

CodePudding user response：

I think you should use the grid classes instead of flex for this purpose. Then you can use row-span and col-span, which makes it quite easy to achieve the grid that is in the example in your question.

Here is an example in the tailwind playground.

See this video of TailwindLabs.

Hope this helps.