I am trying tailwind css for my mini project to achieve below layout with grid.

My expectations

What I have achieved

Below is my code

<div id="main" >
    <div >
        <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
    </div>
    <div >
        <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
    </div>
    <div >
        <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
    </div>
  </div>

CodePudding user response：

To attain your design guide goals, you can use flex system classes easily as the following code

  <div >
        <div >
            <div >
                <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
            </div>
            <div >
                <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
            </div>
            <div >
                <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
            </div>
            <div >
                <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
            </div>
        </div>
        <div >
            <div >
                <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
            </div>
            <div >
                <div >
                    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
                </div>
                <div >
                    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
                </div>
            </div>
        </div>
    </div>

Make sure that your small images dimensions to be square for more proper display. Enjoy!

CodePudding user response：

Layout created tailwind css 3 Grid system

<div id="main" >
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
  <div >
    <img  src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
  </div>
</div>