columns.component.html

<app-page-header
  title="Columns"
  title1="Columns"
  activeitem="Elements"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Based On Column Count</h5>
      </div>
      <div class="box-body">
        <div class="relative">
          <div
            class="absolute inset-0 -top-8 -bottom-8 grid grid-cols-1 sm:grid-cols-3 gap-8"
          >
            <div
              class="bg-stripes-primary dark:bg-stripes-primary opacity-75 w-full h-full"
            ></div>
            <div
              class="hidden sm:block bg-stripes-primary dark:bg-stripes-primary opacity-75 w-full h-full"
            ></div>
            <div
              class="hidden sm:block bg-stripes-primary dark:bg-stripes-primary opacity-75 w-full h-full"
            ></div>
          </div>
          <div class="relative columns-1 sm:columns-3 gap-8">
            <div class="relative aspect-w-16 aspect-h-9">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/1.jpg"
                alt="Image Description"
              />
            </div>
            <div class="relative aspect-w-1 aspect-h-1 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/2.jpg"
                alt="Image Description"
              />
            </div>
            <div class="relative aspect-w-1 aspect-h-1 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/4.jpg"
                alt="Image Description"
              />
            </div>
            <div
              class="hidden sm:block relative aspect-w-1 aspect-h-1 mt-8 sm:mt-0"
            >
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/9.jpg"
                alt="Image Description"
              />
            </div>
            <div class="hidden sm:block relative aspect-w-16 aspect-h-9 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/8.jpg"
                alt="Image Description"
              />
            </div>
            <div class="hidden sm:block relative aspect-w-1 aspect-h-1 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/7.jpg"
                alt="Image Description"
              />
            </div>
            <div
              class="hidden sm:block relative aspect-w-1 aspect-h-1 mt-8 sm:mt-0"
            >
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/5.jpg"
                alt="Image Description"
              />
            </div>
            <div class="hidden sm:block relative aspect-w-1 aspect-h-1 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/6.jpg"
                alt="Image Description"
              />
            </div>
            <div class="hidden sm:block relative aspect-w-16 aspect-h-9 mt-8">
              <img
                class="w-full object-cover rounded-sm"
                src="./assets/img/gallery/5.jpg"
                alt="Image Description"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Based On Column Width</h5>
      </div>
      <div class="box-body">
        <div class="relative rounded-xl overflow-auto max-h-[800px]">
          <div class="relative">
            <div class="columns-3xs gap-8 space-y-8">
              <div class="relative aspect-w-16 aspect-h-9">
                <img
                  class="w-full object-cover rounded-sm"
                  src="./assets/img/gallery/1.jpg"
                  alt="Image Description"
                />
              </div>
              <div class="relative aspect-w-1 aspect-h-1">
                <img
                  class="w-full object-cover rounded-sm"
                  src="./assets/img/gallery/7.jpg"
                  alt="Image Description"
                />
              </div>
              <div class="relative hidden sm:block aspect-w-1 aspect-h-1">
                <img
                  class="w-full object-cover rounded-sm"
                  src="./assets/img/gallery/8.jpg"
                  alt="Image Description"
                />
              </div>
              <div class="relative hidden sm:block aspect-w-16 aspect-h-9">
                <img
                  class="w-full object-cover rounded-sm"
                  src="./assets/img/gallery/5.jpg"
                  alt="Image Description"
                />
              </div>
              <div class="relative hidden sm:block aspect-w-16 aspect-h-9">
                <img
                  class="w-full object-cover rounded-sm"
                  src="./assets/img/gallery/6.jpg"
                  alt="Image Description"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-2 -->