Grids

Grids: Grid is a versatile layout to make different sections on a webpage. For now, there are three grid layouts available: two, three & responsive column layouts.

COMPONENT DEMO:

2 COLUMN GRID LAYOUT:

            <!-- 2 COLUMN GRID LAYOUT -->
            <div class="gentle-grid-2-col">
              <!-- GRID ITEMS -->
              <div class="gentle-grid-item"></div>
              <div class="gentle-grid-item"></div>
            </div>

3 COLUMN GRID LAYOUT

            <!-- 3 COLUMN GRID LAYOUT -->
            <div class="gentle-grid-3-col px-4 py-8">
              <!-- GRID ITEMS -->
              <div class="gentle-grid-item"></div>
              <div class="gentle-grid-item"></div>
              <div class="gentle-grid-item"></div>
            </div>

RESPONSIVE GRID LAYOUT: In this layout depending on the available space the items adjust themselves

TRENDING

Proteinated Milk

By Humpy A2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, blanditiis accusantium, ea neque sunt provident veniam error sint dolores quia soluta. Fugit reiciendis debitis expedita, quod dolor odio consequuntur ad!

₹600 ~~₹1000~~ 40% off

TRENDING

Proteinated Milk

By Humpy A2

₹600 ~~₹1000~~ 40% off

TRENDING

Proteinated Milk

By Humpy A2

₹600 ~~₹1000~~ 40% off

TRENDING

Proteinated Milk

By Humpy A2

₹600 ~~₹1000~~ 40% off

TRENDING

Proteinated Milk

By Humpy A2

₹600 ~~₹1000~~ 40% off

          <script
            src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fdev-enforced%2FGentle_UI%2Fblob%2Fdocumentation-layout%2Fdocumentation%2Fgrids.html%23L93-L98&style=atom-one-dark&showBorder=on&showCopy=on"></script>
        </div>
        <p class="txt-sm">3 COLUMN GRID LAYOUT</p>
        <div class="component-demonstration">
          <!-- 3 COLUMN GRID LAYOUT -->
          <div class="gentle-grid-3-col px-4 py-8">
            <!-- GRID ITEMS -->
            <div class="gentle-grid-item"></div>
            <div class="gentle-grid-item"></div>
            <div class="gentle-grid-item"></div>
          </div>
        </div>
        <div class="code-demonstration">
          <script
            src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fdev-enforced%2FGentle_UI%2Fblob%2Fdocumentation-layout%2Fdocumentation%2Fgrids.html%23L105-L111&style=atom-one-dark&showBorder=on&showCopy=on"></script>
        </div>
        <p class="txt-sm">
          RESPONSIVE GRID LAYOUT: In this layout depending on the available
          space the items adjust themselves
        </p>
        <div class="component-demonstration card-demo">
          <div class="gentle-grid-responsive py-8">
            <div class="card card-vertical">
              <div class="card-header">
                <div class="card-badge card-badge-info">
                  <span>TRENDING</span>
                </div>
                <div class="card-dismiss">
                  <i class="far fa-times-circle card-dismiss-icon"></i>
                </div>
              </div>
              <img loading="lazy"
                src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
                alt="Milk Packet" class="card-media-img" />
              <div class="card-content">
                <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
                <p class="card-details-subtitle">By Humpy A2</p>
                <p class="card-description">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Nobis, blanditiis accusantium, ea neque sunt provident
                  veniam error sint dolores quia soluta. Fugit reiciendis
                  debitis expedita, quod dolor odio consequuntur ad!
                </p>
                <p class="card-pricing">
                  <span class="card-price">₹600</span>
                  <del class="card-original-price">₹1000</del>
                  <span class="card-discount">40% off</span>
                </p>
              </div>
              <div class="card-actions">
                <button class="btn btn-warning btn-warning-hover">
                  BUY NOW
                </button>
                <button class="btn btn-link btn-primary-hover">
                  ADD TO CART
                </button>
                <div class="card-icon-action">
                  <a class="link-none" href="#"><i class="fas fa-heart wish-icon"></i></a>
                </div>
              </div>
            </div>
            <div class="card card-vertical">
              <div class="card-header">
                <div class="card-badge card-badge-info">
                  <span>TRENDING</span>
                </div>
                <div class="card-dismiss">
                  <i class="far fa-times-circle card-dismiss-icon"></i>
                </div>
              </div>
              <img loading="lazy"
                src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
                alt="Milk Packet" class="card-media-img" />
              <div class="card-content">
                <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
                <p class="card-details-subtitle">By Humpy A2</p>
                <p class="card-description">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Nobis, blanditiis accusantium, ea neque sunt provident
                  veniam error sint dolores quia soluta. Fugit reiciendis
                  debitis expedita, quod dolor odio consequuntur ad!
                </p>
                <p class="card-pricing">
                  <span class="card-price">₹600</span>
                  <del class="card-original-price">₹1000</del>
                  <span class="card-discount">40% off</span>
                </p>
              </div>
              <div class="card-actions">
                <button class="btn btn-warning btn-warning-hover">
                  BUY NOW
                </button>
                <button class="btn btn-link btn-primary-hover">
                  ADD TO CART
                </button>
                <div class="card-icon-action">
                  <a class="link-none" href="#"><i class="fas fa-heart wish-icon"></i></a>
                </div>
              </div>
            </div>
            <div class="card card-vertical">
              <div class="card-header">
                <div class="card-badge card-badge-info">
                  <span>TRENDING</span>
                </div>
                <div class="card-dismiss">
                  <i class="far fa-times-circle card-dismiss-icon"></i>
                </div>
              </div>
              <img loading="lazy"
                src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
                alt="Milk Packet" class="card-media-img" />
              <div class="card-content">
                <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
                <p class="card-details-subtitle">By Humpy A2</p>
                <p class="card-description">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Nobis, blanditiis accusantium, ea neque sunt provident
                  veniam error sint dolores quia soluta. Fugit reiciendis
                  debitis expedita, quod dolor odio consequuntur ad!
                </p>
                <p class="card-pricing">
                  <span class="card-price">₹600</span>
                  <del class="card-original-price">₹1000</del>
                  <span class="card-discount">40% off</span>
                </p>
              </div>
              <div class="card-actions">
                <button class="btn btn-warning btn-warning-hover">
                  BUY NOW
                </button>
                <button class="btn btn-link btn-primary-hover">
                  ADD TO CART
                </button>
                <div class="card-icon-action">
                  <a class="link-none" href="#"><i class="fas fa-heart wish-icon"></i></a>
                </div>
              </div>
            </div>
            <div class="card card-vertical">
              <div class="card-header">
                <div class="card-badge card-badge-info">
                  <span>TRENDING</span>
                </div>
                <div class="card-dismiss">
                  <i class="far fa-times-circle card-dismiss-icon"></i>
                </div>
              </div>
              <img loading="lazy"
                src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
                alt="Milk Packet" class="card-media-img" />
              <div class="card-content">
                <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
                <p class="card-details-subtitle">By Humpy A2</p>
                <p class="card-description">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Nobis, blanditiis accusantium, ea neque sunt provident
                  veniam error sint dolores quia soluta. Fugit reiciendis
                  debitis expedita, quod dolor odio consequuntur ad!
                </p>
                <p class="card-pricing">
                  <span class="card-price">₹600</span>
                  <del class="card-original-price">₹1000</del>
                  <span class="card-discount">40% off</span>
                </p>
              </div>
              <div class="card-actions">
                <button class="btn btn-warning btn-warning-hover">
                  BUY NOW
                </button>
                <button class="btn btn-link btn-primary-hover">
                  ADD TO CART
                </button>
                <div class="card-icon-action">
                  <a class="link-none" href="#"><i class="fas fa-heart wish-icon"></i></a>
                </div>
              </div>
            </div>
            <div class="card card-vertical">
              <div class="card-header">
                <div class="card-badge card-badge-info">
                  <span>TRENDING</span>
                </div>
                <div class="card-dismiss">
                  <i class="far fa-times-circle card-dismiss-icon"></i>
                </div>
              </div>
              <img loading="lazy"
                src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_1024/nusnyjv4vv1teca0txre"
                alt="Milk Packet" class="card-media-img" />
              <div class="card-content">
                <h4 class="txt-bold card-details-title">Proteinated Milk</h4>
                <p class="card-details-subtitle">By Humpy A2</p>
                <p class="card-description">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                  Nobis, blanditiis accusantium, ea neque sunt provident

Gentle UI

COMPONENTS

ALERT

AVATARS

BADGES

BUTTONS

CARDS

GRIDS

IMAGES

INPUT

LISTS

MODALS

NAVIGATION

RATINGS

SLIDERS

TEXT UTILITIES

TOASTS

Grids

COMPONENT DEMO:

Proteinated Milk

Proteinated Milk

Proteinated Milk

Proteinated Milk

Proteinated Milk