Tiles

Use our tile options to arrange images with appealing styles.

Tiles 1

image
image
image

                      <div class="flex flex-wrap xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mx-[-15px] mt-[-25px] items-center">
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                            <div class="xl:w-10/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[16.66666667%] md:w-10/12 md:!ml-[16.66666667%] w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                              <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/ab1.jpg" srcset="../../assets/img/photos/ab1@2x.jpg 2x" alt="image"></figure>
                            </div>
                            <!--/column -->
                            <div class="w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                              <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/ab2.jpg" srcset="../../assets/img/photos/ab2@2x.jpg 2x" alt="image"></figure>
                            </div>
                            <!--/column -->
                          </div>
                          <!--/.row -->
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/ab3.jpg" srcset="../../assets/img/photos/ab3@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                      </div>

Tiles 2

image
image
image
image

                      <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                        <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !self-end mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g1.jpg" srcset="../../assets/img/photos/g1@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full !self-end mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g2.jpg" srcset="../../assets/img/photos/g2@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g3.jpg" srcset="../../assets/img/photos/g3@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full !self-start mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g4.jpg" srcset="../../assets/img/photos/g4@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                      </div>

Tiles 3

image
image image 

                      <div class="flex flex-wrap xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mx-[-15px] mt-[-25px] items-center">
                        <div class="w-6/12 flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex ml-auto" src="../../assets/img/photos/sa13.jpg" srcset="../../assets/img/photos/sa13@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                        <div class="w-6/12 flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] mb-5" src="../../assets/img/photos/sa14.jpg" srcset="../../assets/img/photos/sa14@2x.jpg 2x" alt="image">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../../assets/img/photos/sa15.jpg" srcset="../../assets/img/photos/sa15@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                      </div>

Tiles 4

image image
image image 

                      <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                        <div class="w-5/12 flex-[0_0_auto] px-[15px] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] mt-[25px] max-w-full">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex ml-auto" src="../../assets/img/photos/sa9.jpg" srcset="../../assets/img/photos/sa9@2x.jpg 2x" alt="image">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] ml-auto" src="../../assets/img/photos/sa10.jpg" srcset="../../assets/img/photos/sa10@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                        <div class="w-7/12 flex-[0_0_auto] px-[15px] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] mt-[25px] max-w-full">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] mb-5" src="../../assets/img/photos/sa11.jpg" srcset="../../assets/img/photos/sa11@2x.jpg 2x" alt="image">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="../../assets/img/photos/sa12.jpg" srcset="../../assets/img/photos/sa12@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                      </div>

Tiles 5

image image
image image 

                      <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                        <div class="w-6/12 flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] mb-5" src="../../assets/img/photos/sa5.jpg" srcset="../../assets/img/photos/sa5@2x.jpg 2x" alt="image">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] ml-auto" src="../../assets/img/photos/sa6.jpg" srcset="../../assets/img/photos/sa6@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                        <div class="w-6/12 flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="../../assets/img/photos/sa7.jpg" srcset="../../assets/img/photos/sa7@2x.jpg 2x" alt="image">
                          <img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="../../assets/img/photos/sa8.jpg" srcset="../../assets/img/photos/sa8@2x.jpg 2x" alt="image">
                        </div>
                        <!-- /column -->
                      </div>

Tiles 6

image
image
image

                      <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] mt-[25px] px-[15px] max-w-full">
                          <figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../../assets/img/photos/g5.jpg" srcset="../../assets/img/photos/g5@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] mt-[25px] px-[15px] max-w-full">
                          <div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mt-[-25px]">
                            <div class="w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
                              <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g6.jpg" srcset="../../assets/img/photos/g6@2x.jpg 2x" alt="image"></figure>
                            </div>
                            <!--/column -->
                            <div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] mt-[25px] max-w-full">
                              <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g7.jpg" srcset="../../assets/img/photos/g7@2x.jpg 2x" alt="image"></figure>
                            </div>
                            <!--/column -->
                          </div>
                          <!--/.row -->
                        </div>
                        <!--/column -->
                      </div>

Tiles 7

image
image
image
image
image
image
image
image

                      <div class="flex flex-wrap mx-[-10px] mt-[-20px]">
                        <div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full mt-[20px] flex  flex-col ml-auto">
                          <div class="ml-auto mt-6"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc1.jpg" srcset="../../assets/img/demos/vc1@2x.jpg 2x" alt="image"></div>
                          <div class="ml-auto mt-4"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc2.jpg" srcset="../../assets/img/demos/vc2@2x.jpg 2x" alt="image"></div>
                          <div class="ml-auto mt-4"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc3.jpg" srcset="../../assets/img/demos/vc3@2x.jpg 2x" alt="image"></div>
                        </div>
                        <!-- /column -->
                        <div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full mt-[20px]">
                          <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc4.jpg" srcset="../../assets/img/demos/vc4@2x.jpg 2x" alt="image"></div>
                          <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] mt-4" src="../../assets/img/demos/vc5.jpg" srcset="../../assets/img/demos/vc5@2x.jpg 2x" alt="image"></div>
                          <div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] mt-4" src="../../assets/img/demos/vc6.jpg" srcset="../../assets/img/demos/vc6@2x.jpg 2x" alt="image"></div>
                        </div>
                        <!-- /column -->
                        <div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full mt-[20px] flex flex-col">
                          <div class="mt-8"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc7.jpg" srcset="../../assets/img/demos/vc7@2x.jpg 2x" alt="image"></div>
                          <div class="mt-4 mb-10"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="../../assets/img/demos/vc8.jpg" srcset="../../assets/img/demos/vc8@2x.jpg 2x" alt="image"></div>
                        </div>
                        <!-- /column -->
                      </div>

Tiles 8

image
image

                      <div class="flex flex-wrap !relative overlap-grid-2">
                        <div class="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:mt-0">
                          <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><img class="!rounded-[.4rem]" src="../../assets/img/photos/about2.jpg" srcset="../../assets/img/photos/about2@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/.item -->
                        <div class="item xl:w-[55%] xl:mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:mt-[-45%] md:z-[4] md:ml-0">
                          <figure class="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><img class="!rounded-[.4rem]" src="../../assets/img/photos/about3.jpg" srcset="../../assets/img/photos/about3@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/.item -->
                      </div>

Tiles 9

image
image
image

                      <div class="flex flex-wrap xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] max-w-full !mx-auto mt-[-25px]">
                        <div class="w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../../assets/img/photos/g8.jpg" srcset="../../assets/img/photos/g8@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g9.jpg" srcset="../../assets/img/photos/g9@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g10.jpg" srcset="../../assets/img/photos/g10@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                      </div>

Tiles 10

image
image
image

                      <div class="flex flex-wrap xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] max-w-full !mx-auto mt-[-25px]">
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g12.jpg" srcset="../../assets/img/photos/g12@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[12.5px] max-w-full !self-end mt-[25px]">
                          <figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/g13.jpg" srcset="../../assets/img/photos/g13@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                        <div class="w-full flex-[0_0_auto] xl:px-[12.5px] lg:px-[12.5px] md:px-[12.5px] px-[15px] max-w-full mt-[25px]">
                          <figure class="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><img class="!rounded-[.4rem]" src="../../assets/img/photos/g11.jpg" srcset="../../assets/img/photos/g11@2x.jpg 2x" alt="image"></figure>
                        </div>
                        <!--/column -->
                      </div>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image