HTML Exercises

Complex Layout with Grid and Clipping Paths

To create a complex layout using CSS Grid and clipping paths (with clip-path), we can build a visually rich and dynamic page structure. This example will demonstrate the use of CSS Grid to create a multi-section layout with clipping paths to produce unique shapes for the content areas, achieving a modern, cutting-edge design without JavaScript.

    HTML (index.html)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Complex Layout with Grid and Clipping Paths</title>
        <style>
            body {
                margin: 0;
                font-family: 'Arial', sans-serif;
                background-color: #f4f7fa;
            }
    
            /* Overall Page Layout using CSS Grid */
            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 150px 300px 300px;
                gap: 20px;
                padding: 20px;
                max-width: 1200px;
                margin: 0 auto;
            }
    
            /* Individual Grid Item */
            .grid-item {
                position: relative;
                background-color: #3b82f6;
                color: white;
                padding: 20px;
                border-radius: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.5rem;
                clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
                transition: transform 0.5s ease, background-color 0.3s ease;
            }
    
            /* Hover Effect on Grid Item */
            .grid-item:hover {
                transform: scale(1.05) rotate(2deg);
                background-color: #2563eb;
            }
    
            /* Header Section - spans across three columns */
            .header {
                grid-column: 1 / span 3;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
                background-color: #10b981;
                text-align: center;
                font-size: 2rem;
            }
    
            /* Sidebar Section - spans two rows */
            .sidebar {
                grid-row: 2 / span 2;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 85%);
                background-color: #f59e0b;
            }
    
            /* Other Grid Items */
            .content {
                clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
                background-color: #ef4444;
            }
    
            .footer {
                grid-column: 1 / span 3;
                clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
                background-color: #6366f1;
                font-size: 1.2rem;
                text-align: center;
            }
    
            /* Responsive Design */
            @media (max-width: 768px) {
                .grid-container {
                    grid-template-columns: 1fr;
                    grid-template-rows: auto;
                }
    
                .header, .footer {
                    grid-column: auto;
                }
    
                .sidebar {
                    grid-row: auto;
                    clip-path: none;
                }
    
                .grid-item {
                    clip-path: none;
                }
            }
        </style>
    </head>
    <body>
    
        <!-- Complex Layout Container -->
        <div class="grid-container">
            <!-- Header Section -->
            <div class="grid-item header">Header Section</div>
    
            <!-- Sidebar Section -->
            <div class="grid-item sidebar">Sidebar Section</div>
    
            <!-- Main Content Sections -->
            <div class="grid-item content">Content Block 1</div>
            <div class="grid-item content">Content Block 2</div>
            <div class="grid-item content">Content Block 3</div>
    
            <!-- Footer Section -->
            <div class="grid-item footer">Footer Section</div>
        </div>
    
    </body>
    </html>
  1. Save and open index.html in your browser to view your website.

    2. Key Features of This Complex Layout:

    1. CSS Grid Layout:
      • The grid-container uses CSS Grid to define a layout with three columns and three rows (grid-template-columns: repeat(3, 1fr) and grid-template-rows: ...). This layout provides a flexible way to arrange elements responsively.
      • The grid-column and grid-row properties are used to span elements across multiple columns or rows (e.g., the header spans all three columns, and the sidebar spans two rows).
    2. Clipping Paths (clip-path):
      • Each grid item uses clip-path to create custom shapes for the sections. For instance:
        • The header has a diagonal cut on the bottom (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%)).
        • Other elements have different clipped shapes to make the layout more dynamic and visually interesting.
      • Clipping paths are fully customizable, allowing you to create any shape you like.
    3. Hover Effects:
      • On hover, each grid item scales up slightly (transform: scale(1.05)) and rotates slightly for a dynamic, interactive effect.
      • The background color also changes on hover for added visual feedback.
    4. Complex Shapes Using clip-path:
      • Each grid item has a unique shape due to the clip-path property, making the layout more engaging. For example:
        • The sidebar has a polygon shape that creates a slanted edge on the bottom.
        • The content blocks have slanted or curved edges to make them stand out from traditional rectangular boxes.
    5. Responsive Design:
      • The layout is fully responsive. In smaller viewports (under 768px), the grid layout changes to a single column layout (grid-template-columns: 1fr), and the clipping paths are removed to simplify the design on smaller screens.
    6. Dynamic Background Colors:
      • Each section has its own vibrant background color for a visually appealing design. You can change these colors to match your theme or branding.

    Potential Enhancements:

    • Media Queries: Further refine the design for tablet and mobile views.
    • Additional Animations: You could add more animations, like transitioning the clip-path values for smoother clipping effects on hover or focus states.
    • Text or Icons: Add icons or text animations inside the clipped grid items to further enhance interactivity.

    This complex layout demonstrates how CSS Grid and clipping paths can be combined to create a visually rich and dynamic page structure, entirely with CSS.