How to arrange navigation elements in CSS to match my Figma mockup layout?

Other Questions Figma
1

I’m trying to recreate a navigation component from my design mockup but I can’t get the positioning right. I’ve been working on this travel website layout and need help with arranging the filter boxes properly.

<!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="topbar">
            <div class="container">
                <img src="logo.png" alt="Logo">
                <nav class="main-nav">
                    <a href="#" class="current">Home</a>
                    <a href="#">Destinations</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                </nav>
                <div class="auth-buttons">
                    <button class="login-btn">Sign In</button>
                    <button class="signup-btn">Register</button>
                </div>
            </div>
        </header>
        
        <main class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <h1>Find Your Dream Vacation</h1>
                    <p>Discover amazing places around the world</p>
                    
                    <div class="search-panel">
                        <div class="filter-box location-filter">
                            <span>Location</span>
                        </div>
                        <div class="filter-box activity-filter">
                            <span>Activity</span>
                        </div>
                        <div class="filter-box rating-filter">
                            <span>Rating</span>
                        </div>
                        <div class="filter-box date-filter">
                            <span>Date</span>
                        </div>
                    </div>
                </div>
                
                <div class="hero-image">
                    <img src="travel-image.jpg" alt="Travel">
                </div>
            </div>
        </main>
    </div>
</body>
</html>

.search-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
    max-width: 500px;
}

.filter-box {
    flex: 1;
    min-width: 200px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: white;
}

The search-panel div contains my filter elements. I’ve tried both flexbox and grid but can’t get them to align like in my design. The boxes should be arranged in a 2x2 grid pattern but they keep stacking weird. Any suggestions on what I’m missing here?

2

Your flex-wrap is the problem here. When flexbox wraps items, it doesn’t create a real grid - just pushes overflow to new lines without keeping columns aligned. For a proper 2x2 layout, go with grid like others suggested. But also make your search panel responsive. Ditch the fixed max-width and use a percentage of your hero section instead. Your filter boxes will scale naturally with screen size. Check if your Figma mockup works at different viewport sizes too - designs often look perfect at one breakpoint but break everywhere else. Pro tip: grab spacing values straight from Figma’s inspect panel instead of guessing the gaps.

3

Your container constraints are the problem. You’ve got max-width: 500px on the search panel but min-width: 200px on each filter box - the math doesn’t work. Two 200px boxes plus a 15px gap barely fits, so there’s no room for a clean 2x2 layout. Either bump your search panel to 600-650px max-width so the boxes have space, or stick with 500px and drop the min-width to 100-120px. Use flex-basis: calc(50% - 7.5px) for consistent sizing. I’ve hit this exact issue before with tight design specs. Your container width has to actually fit what you’re trying to cram in there.

4

Your flexbox approach is close, but min-width: 200px on a max-width: 500px container forces awkward wrapping.

For a clean 2x2 grid, use CSS Grid instead:

.search-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    max-width: 500px;
}

.filter-box {
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: white;
}

This gives you exactly two columns with equal spacing.

Honestly though, you might want to automate this whole Figma-to-CSS workflow. I’ve started using automation tools that parse design files and spit out the CSS structure automatically.

Set it up once and you’ll save hours every time your designer makes changes. Way better than hand-tweaking CSS constantly.

5

your min-width is the problem. you’ve got min-width: 200px but your container maxes out at 500px - there’s just not enough space for a proper 2x2 grid. drop the min-width completely or bring it down to something like 120px. also try flex-basis: calc(50% - 7.5px) instead of flex: 1 if you need exact sizing.