Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Stunning Art & Photography

Explore Visual Excellence

Dive into our curated gallery of breathtaking art and photography. From contemporary masterpieces to timeless classics, our collection showcases a diverse range of styles and subjects to inspire and captivate. Whether you're an art connoisseur or simply enjoy stunning visuals, there's something for everyone.

Gallery Highlights:

Diverse Themes: A wide array of themes ranging from landscapes and portraits to abstract and surreal works.
High-Quality Imagery: Stunning visuals presented in crisp, vibrant detail.
Global Perspectives: Contributions from talented artists and photographers worldwide.
Interactive Features: Zoom in and explore every detail of your favorite pieces.
Curated Collections: Browse themed collections for a cohesive artistic experience.
Shareable Moments: Easily share your favorite artwork with friends and family.

Simple Gallery

The Gallery component is a responsive, card-based image grid that dynamically displays a set of images. Each image item may optionally include a title, a description, and can have additional styling (e.g., taller cards). This makes it suitable for use cases such as portfolios, photo albums, product listings, or blog visuals.

Key features

Responsive Grid Layout:Uses CSS Grid to adapt the number of columns based on screen size using auto-fill and minmax().
Dynamic Content Insertion:Images and metadata (title, description) are passed as a JavaScript array and injected on DOM load using the CeGy() method.
Card UI:Each item is styled as a card with a shadow, border radius, and hover animation for modern, elevated presentation.
Row Span Support:Cards with more content or taller images can span multiple rows using the tall class.
Mobile Optimization:Adjusts the layout and image sizes for smaller screen widths using media queries.

Note

The .gallery class controls how the gallery items (images) are arranged. By default, it uses a flexible layout that automatically fills the space with as many columns as possible. But if you want a specific number of columns (and thus control the number of rows), you can set it manually.

Manually you can set the number of columns by using

    grid-template-columns: repeat(n, 1fr)

You can change n according to number of columns required.

Source Code


<div class="gallery" id="simpleGallery">
    <!-- Gallery items will be dynamically inserted here -->
</div>


.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px;
}

.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    width: 100%;
    height: 200px; /* Fixed height for all images */
    object-fit: cover; /* Ensures the image covers the container */
    display: block;
}

.gallery-item .content {
    padding: 16px;
}

.gallery-item h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

/* Dynamically adjust row spans for taller images */
.gallery-item.tall {
    grid-row-end: span 2; /* Span 2 rows for taller images */
}

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .gallery-item img {
        height: 150px; /* Smaller height for mobile */
    }
}


document.addEventListener("DOMContentLoaded", () => {

    // You can get data from API or any other source
    const images = [
        { src: 'https://tse1.mm.bing.net/th?id=OIP.L5bIUeQFgz24UDx9PYF-zgHaEK&pid=Api', title: 'Image 1', description: 'Description for Image 1' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.0e6Q4HEqXIJ8n_D2tko7mQHaDL&pid=Api', title: 'Image 2', description: 'Description for Image 2' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.tgXFkn6dI6nshMjQxChBVgHaJ3&pid=Api', title: 'Image 3', description: 'Description for Image 3' },
        { src: 'https://tse2.mm.bing.net/th?id=OIP.BTwbaZBoyRyD2MyzfIHXMAHaFb&pid=Api', title: 'Image 4', description: 'Description for Image 4' },
        { src: 'https://tse4.mm.bing.net/th?id=OIP.640zkdroUstPQt8uZkaahgHaFF&pid=Api', title: 'Image 5', description: 'Description for Image 5' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.mZpy07Pzl2iaoPNTIwuRQwHaDt&pid=Api', title: 'Image 6', description: 'Description for Image 6' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.RXcSBKVAL13OqhTBpJ1UtAHaFj&pid=Api', title: 'Image 7', description: 'Description for Image 7' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.t8Rh2hoytbdFRmJkq-SJeQHaEK&pid=Api', title: 'Image 8', description: 'Description for Image 8' },
    ];

    CT.CeGy('simpleGallery', images, 'simple'); // gallery container, images, and gallery type

});

Masonry Gallery

The Masonry Gallery is a dynamic image grid that arranges items in a staggered, Pinterest-style layout. It is ideal for displaying images of different heights, creating a visually engaging and fluid design. Instead of a strict row-and-column structure, the gallery fills space vertically and adjusts based on image size—offering an artistic and modern look.

Key Features

Supports images with varying heights
Automatically arranges images to minimize gaps
Responsive layout that adapts to screen sizes
Smooth and flexible visual flow

Note

The .tall class can be conditionally applied to items you want to span more vertical space.
You can change the number of columns by adjusting grid-template-columns.
This layout works best when images have natural height variations.

Source Code


<div class="masonry-gallery" id="masonryGallery">
    <!-- Gallery items will be dynamically inserted here -->
</div>


/* Masonry Item  */
.masonry-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px;
    grid-auto-rows: 200px; /* Base row height */
}

.masonry-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.masonry-item img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Maintain aspect ratio */
}

/* Dynamically adjust row spans for taller images */
.masonry-item.tall {
    grid-row-end: span 2; /* Span 2 rows for taller images */
}

@media (max-width: 600px) {
    .masonry-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: 150px; /* Smaller base row height for mobile */
    }

    .masonry-item.tall {
        grid-row-end: span 2; /* Adjust for mobile */
    }
}


document.addEventListener("DOMContentLoaded", () => {

    // You can get data from API or any other source
    const images = [
        { src: 'https://tse1.mm.bing.net/th?id=OIP.L5bIUeQFgz24UDx9PYF-zgHaEK&pid=Api', title: 'Image 1', description: 'Description for Image 1' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.0e6Q4HEqXIJ8n_D2tko7mQHaDL&pid=Api', title: 'Image 2', description: 'Description for Image 2' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.tgXFkn6dI6nshMjQxChBVgHaJ3&pid=Api', title: 'Image 3', description: 'Description for Image 3' },
        { src: 'https://tse2.mm.bing.net/th?id=OIP.BTwbaZBoyRyD2MyzfIHXMAHaFb&pid=Api', title: 'Image 4', description: 'Description for Image 4' },
        { src: 'https://tse4.mm.bing.net/th?id=OIP.640zkdroUstPQt8uZkaahgHaFF&pid=Api', title: 'Image 5', description: 'Description for Image 5' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.mZpy07Pzl2iaoPNTIwuRQwHaDt&pid=Api', title: 'Image 6', description: 'Description for Image 6' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.RXcSBKVAL13OqhTBpJ1UtAHaFj&pid=Api', title: 'Image 7', description: 'Description for Image 7' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.t8Rh2hoytbdFRmJkq-SJeQHaEK&pid=Api', title: 'Image 8', description: 'Description for Image 8' },
    ];

    CT.CeGy('masonryGallery', images, 'masonry');

});

Product Gallery

The Product Gallery component is a structured, responsive layout designed to highlight multiple products in a visually appealing format. It presents product images, titles, ratings, and action buttons in individual cards—ideal for ecommerce and marketing platforms.

Key Features

Main image display for better product visibility
Thumbnail previews allow quick selection
Responsive layout adjusts to screen size
Modern card styling and hover interaction
Dynamic data population via JavaScript

Source Code


<div class="product-gallery" id="productGallery">
    <!-- Gallery items will be dynamically inserted here -->
</div>


/* product gallery  */
.product-gallery {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-gallery-main img {
    width: 100%;
    height: 400px; /* Fixed height for the main image */
    object-fit: cover;
    border-radius: 8px;
}

.product-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 small images in a row */
    gap: 16px;
    margin-top: 16px;
}

.product-gallery-thumbnails img {
    width: 100%;
    height: 150px; /* Fixed height for thumbnail images */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

@media (max-width: 600px) {
    .product-gallery-main img {
        height: 300px; /* Smaller height for mobile */
    }

    .product-gallery-thumbnails {
        grid-template-columns: repeat(2, 1fr); /* 2 small images in a row for mobile */
    }

    .product-gallery-thumbnails img {
        height: 120px; /* Smaller height for mobile */
    }
}


document.addEventListener("DOMContentLoaded", () => {

    // You can get data from API or any other source
    const productImages = [
        {
            src: 'https://tse2.mm.bing.net/th?id=OIP.VoXXZWHOcYsMtnjlLJJUFgHaEh&pid=Api',
            title: 'Blue Lace-Up Sneakers',
            description: 'A pair of blue lace-up sneakers, perfect for casual wear.'
        },
        {
            src: 'https://tse1.mm.bing.net/th?id=OIP.yF1wrVuu51r-kw9iQyeJzAHaE8&pid=Api',
            title: 'Red Sneakers',
            description: 'Red and white sneakers with a modern and sporty design.'
        },
        {
            src: 'https://tse2.mm.bing.net/th?id=OIP.-t9hyCe9PHVINiURyIPhVwHaFj&pid=Api',
            title: 'Black Running Shoes',
            description: 'Lightweight black running shoes with cushioned soles.'
        },
        {
            src: 'https://tse2.mm.bing.net/th?id=OIP.h0PnJVWRWPsBvbsrTe7TpQHaE8&pid=Api',
            title: 'White Sneakers',
            description: 'Classic white sneakers, versatile for any outfit.'
        },
        {
            src: 'https://images.pexels.com/photos/292999/pexels-photo-292999.jpeg',
            title: 'Brown Leather Shoes',
            description: 'Elegant brown leather shoes with a timeless look.'
        },
    ];

    CT.CeGy('productGallery', productImages, 'product');

});

Lookbook Gallery

The Lookbook Gallery is a curated visual layout designed to present fashion, lifestyle, or editorial content in a visually rich and immersive format. It's ideal for storytelling, inspiration boards, or showcasing seasonal collections.

This gallery focuses on large visuals, minimal distractions, and elegant spacing—perfect for brand experiences or campaign-style displays.

Key Features

Stylish, immersive layout for visual storytelling
Responsive grid with dynamic heights
Smooth hover and scaling interactions
Mobile-friendly and touch-optimized
Dynamically populated via JavaScript

Source Code


<div class="lookbook-gallery" id="lookbookGallery">
    <!-- Gallery items will be dynamically inserted here -->
</div>


/* lookbook gallery  */
    .lookbook-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-rows: auto auto; /* Two rows */
    gap: 16px; /* Spacing between items */
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.lookbook-main {
    grid-column: 2 / 3; /* Big image on the right */
    grid-row: 1 / 3; /* Span two rows */
}

.lookbook-main img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover;
    border-radius: 8px;
}

.lookbook-thumbnails {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for thumbnails */
    gap: 16px;
    grid-column: 1 / 2; /* Thumbnails on the left */
    grid-row: 1 / 3; /* Span two rows */
}

.lookbook-thumbnails img {
    width: 100%;
    height: 150px; /* Fixed height for thumbnail images */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .lookbook-gallery {
        grid-template-columns: 1fr; /* Single column for mobile */
        grid-template-rows: auto;
    }

    .lookbook-main {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .lookbook-thumbnails {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        grid-template-columns: repeat(2, 1fr); /* Two columns for mobile */
    }

    .lookbook-main img {
        height: 300px; /* Smaller height for mobile */
    }

    .lookbook-thumbnails img {
        height: 120px; /* Smaller height for mobile */
    }
}


document.addEventListener("DOMContentLoaded", () => {

    // You can get data from API or any other source
    const images = [
        { src: 'https://tse1.mm.bing.net/th?id=OIP.L5bIUeQFgz24UDx9PYF-zgHaEK&pid=Api', title: 'Image 1', description: 'Description for Image 1' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.0e6Q4HEqXIJ8n_D2tko7mQHaDL&pid=Api', title: 'Image 2', description: 'Description for Image 2' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.tgXFkn6dI6nshMjQxChBVgHaJ3&pid=Api', title: 'Image 3', description: 'Description for Image 3' },
        { src: 'https://tse2.mm.bing.net/th?id=OIP.BTwbaZBoyRyD2MyzfIHXMAHaFb&pid=Api', title: 'Image 4', description: 'Description for Image 4' },
        { src: 'https://tse4.mm.bing.net/th?id=OIP.640zkdroUstPQt8uZkaahgHaFF&pid=Api', title: 'Image 5', description: 'Description for Image 5' },
        { src: 'https://tse3.mm.bing.net/th?id=OIP.mZpy07Pzl2iaoPNTIwuRQwHaDt&pid=Api', title: 'Image 6', description: 'Description for Image 6' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.RXcSBKVAL13OqhTBpJ1UtAHaFj&pid=Api', title: 'Image 7', description: 'Description for Image 7' },
        { src: 'https://tse1.mm.bing.net/th?id=OIP.t8Rh2hoytbdFRmJkq-SJeQHaEK&pid=Api', title: 'Image 8', description: 'Description for Image 8' },
    ];

    CT.CeGy('lookbookGallery', images, 'lookbook');

});

Web Tool

Welcome Amit

Logout

Change Password

Change Email