CssToolBox

Layouts

Asymmetrical Grid

Item 1

This is an example of an asymmetrical grid item with a larger size.

Item 2

A medium-sized grid item with varying dimensions.

Item 3

A smaller item, fitting the asymmetrical layout.

Item 4

A medium-sized grid item to add variety to the design.

Item 5

This large item balances the asymmetry of the grid.

Item 6

A small item, bringing a unique touch to the layout.

HTML Code

Below is the HTML code:

                    <!-- Sample HTML code -->
                    <div class="asymmetrical-grid">
                        <div class="grid-item large-item">
                        <img src="image9.jfif" alt="Image 1" class="grid-image">
                        <div class="item-content">
                            <h3>Item 1</h3>
                            <p>This is an example of an asymmetrical grid item with a larger size.</p>
                        </div>
                        </div>
                        <div class="grid-item medium-item">
                        <img src="image5.jfif" alt="Image 2" class="grid-image">
                        <div class="item-content">
                            <h3>Item 2</h3>
                            <p>A medium-sized grid item with varying dimensions.</p>
                        </div>
                        </div>
                        <div class="grid-item small-item">
                        <img src="image6.jfif" alt="Image 3" class="grid-image">
                        <div class="item-content">
                            <h3>Item 3</h3>
                            <p>A smaller item, fitting the asymmetrical layout.</p>
                        </div>
                        </div>
                        <div class="grid-item medium-item">
                        <img src="image2.jfif" alt="Image 4" class="grid-image">
                        <div class="item-content">
                            <h3>Item 4</h3>
                            <p>A medium-sized grid item to add variety to the design.</p>
                        </div>
                        </div>
                        <div class="grid-item large-item">
                        <img src="image10.jfif" alt="Image 5" class="grid-image">
                        <div class="item-content">
                            <h3>Item 5</h3>
                            <p>This large item balances the asymmetry of the grid.</p>
                        </div>
                        </div>
                        <div class="grid-item small-item">
                        <img src="image3.jfif" alt="Image 6" class="grid-image">
                        <div class="item-content">
                            <h3>Item 6</h3>
                            <p>A small item, bringing a unique touch to the layout.</p>
                        </div>
                        </div>
                    </div>

CSS Code

Below is the CSS code:

                    /* Asymmetrical Grid Container */
                    .asymmetrical-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-gap: 20px;
                    padding: 20px;
                    max-width: 1200px;
                    width: 100%;
                    box-sizing: border-box;
                    }

                    /* Grid Item Styling */
                    .grid-item {
                    background-color: #fff;
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    }

                    .grid-item:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
                    }

                    /* Image Styling */
                    .grid-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    }

                    /* Item Content Styling */
                    .item-content {
                    padding: 15px;
                    }

                    .item-content h3 {
                    font-size: 1.25rem;
                    font-weight: bold;
                    margin-bottom: 10px;
                    }

                    .item-content p {
                    font-size: 1rem;
                    color: #666;
                    }

                    /* Grid Item Variations */
                    .large-item {
                    grid-column: span 2;
                    }

                    .medium-item {
                    grid-column: span 1;
                    }

                    .small-item {
                    grid-column: span 1;
                    }

                    /* Responsive Design */
                    @media (max-width: 1024px) {
                    .asymmetrical-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                    .large-item {
                        grid-column: span 2;
                    }
                    }

                    @media (max-width: 600px) {
                    .asymmetrical-grid {
                        grid-template-columns: 1fr;
                    }
                    .large-item {
                        grid-column: span 1;
                    }
                    }

CSS Layouts Library

Gradient Generator

Freehand Gradient

Shadow Boxes

Shadow Freehand

Text Shadow