How to create a grid layout for navigation elements matching my design mockup?

Other Questions Figma
1

I’m trying to recreate a specific layout from my design mockup but can’t get the positioning right. I have four navigation boxes that need to be arranged in a 2x2 grid pattern. I’ve tried both flexbox and CSS grid but nothing seems to work properly.

Here’s what I have so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Travel Site</title>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
                <img src="logo.png" alt="Logo">
                <nav class="navigation">
                    <a href="#" class="current">Home</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Contact</a>
                </nav>
                <div class="auth-buttons">
                    <a href="#" class="login-btn">Login</a>
                    <a href="#" class="signup-btn">Sign Up</a>
                </div>
            </div>
        </header>
        
        <main class="main-content">
            <div class="container">
                <section class="hero-section">
                    <div class="hero-text">
                        <h1>Find Your Perfect Getaway</h1>
                        <p>Discover amazing destinations around the world</p>
                        <div class="divider"></div>
                        <div class="filter-grid">
                            <div class="filter-box">
                                <span>Location</span>
                                <img src="arrow.png" alt="">
                            </div>
                            <div class="filter-box">
                                <span>Category</span>
                                <img src="arrow.png" alt="">
                            </div>
                            <div class="filter-box">
                                <span>Rating</span>
                                <img src="arrow.png" alt="">
                            </div>
                            <div class="filter-box">
                                <span>Date</span>
                                <img src="arrow.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="hero-image">
                        <img src="travel-image.jpg" alt="Travel">
                    </div>
                </section>
            </div>
        </main>
    </div>
</body>
</html>

And the CSS:

.filter-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    max-width: 500px;
}

.filter-box {
    width: 220px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

The issue is with the filter-grid class. I can’t seem to get these four boxes positioned correctly in a 2x2 layout. Any suggestions on what I might be doing wrong?

2

Looking at your CSS, there’s another approach that might help. Instead of using grid-template-rows: repeat(2, 1fr), try removing that line entirely and let the grid wrap naturally. Your current row definition is forcing the grid to calculate equal heights, which can cause positioning issues when combined with the fixed height on your filter boxes. Also consider adjusting your gap value - 15px might be creating more spacing than your mockup shows. I’ve found that CSS Grid works more predictably when you define columns explicitly but let rows flow automatically, especially for this type of filter interface. The combination of max-width: 500px on the container and grid-template-columns: repeat(2, 1fr) should give you the clean 2x2 layout you’re after once the row constraint is removed.

3

honestly i think the probem might be simpler than you think. try adding box-sizing: border-box to your .filter-box class - the padding and border are adding extra width which messes up the grid calculations. also maybe set min-width: 0 on the boxes to prevent them from overflowing the grid cells.

4

The main issue I see is that you’re setting a fixed width on your .filter-box elements while using CSS Grid with 1fr columns. This creates a conflict where the grid tries to distribute space evenly but your boxes have a rigid 220px width that doesn’t align with your 500px max-width container. Remove the width: 220px from .filter-box and let the grid handle the sizing automatically. The 1fr values will make each column take up equal space within your 500px container. Your current setup should work fine once you eliminate that width constraint. I had the same problem when I first started using CSS Grid - mixing fixed widths with fractional units rarely produces the expected results. The grid system is designed to handle the sizing for you when you use fractional units properly.