如何实现下拉菜单的2×N网格布局？

不用额外添加wrapper类，直接调整.dropdown-content的样式就能让选项每行最多显示2个，形成2×N的网格布局，以下是两种可行方案：

方案一：CSS Grid实现 #

直接把.dropdown-content的布局改成Grid，指定2列即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu</title>
    <style>
        .custom-box {
            background-color: #ff5733;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        .box-title {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }
        .box-content {
            margin-top: 10px;
            font-size: 18px;
            color: #333;
        }
        .custom-button {
            background-color: #ff8f33;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        .custom-button:hover {
            background-color: #ff5722;
        }
        /* 修改dropdown-content的样式 */
        .dropdown-content {
            display: none;
            grid-template-columns: repeat(2, auto); /* 固定2列，宽度自适应内容 */
            gap: 10px 20px; /* 设置选项之间的间距，上下10px，左右20px */
            margin-top: 15px;
        }
        .dropdown-item {
            cursor: pointer;
            padding: 8px 15px;
            background-color: #fff;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="custom-box">
        <div class="box-title">Dropdown Menu</div>
        <div class="box-content">
            Sample Text
        </div>
        <button class="custom-button" id="dropdown-button">Click Me</button>
        <div class="dropdown-content" id="dropdown-menu">
            <div class="dropdown-item">Item 1</div>
            <div class="dropdown-item">Item 2</div>
            <div class="dropdown-item">Item 3</div>
            <div class="dropdown-item">Item 4</div>
        </div>
    </div>
    <script>
        const dropdownButton = document.getElementById('dropdown-button');
        const dropdownMenu = document.getElementById('dropdown-menu');
        dropdownButton.addEventListener('click', () => {
            dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'grid' : 'none';
        });
    </script>
</body>
</html>

关键修改点：

• 把.dropdown-content的display设为grid，用grid-template-columns: repeat(2, auto)定义2列，宽度随内容自适应
• JS里切换显示时要把flex改成grid
• 可以用gap属性统一设置选项之间的间距，比单独加margin更方便

方案二：Flexbox实现 #

如果习惯用Flex，也可以通过换行和宽度设置实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Menu</title>
    <style>
        .custom-box {
            background-color: #ff5733;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        .box-title {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }
        .box-content {
            margin-top: 10px;
            font-size: 18px;
            color: #333;
        }
        .custom-button {
            background-color: #ff8f33;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }
        .custom-button:hover {
            background-color: #ff5722;
        }
        /* 修改dropdown-content的样式 */
        .dropdown-content {
            display: none;
            flex-wrap: wrap; /* 允许选项换行 */
            justify-content: center; /* 水平居中对齐 */
            gap: 10px 20px;
            margin-top: 15px;
            width: 200px; /* 可以固定容器宽度，让选项平分 */
        }
        .dropdown-item {
            cursor: pointer;
            padding: 8px 15px;
            background-color: #fff;
            border-radius: 4px;
            flex: 0 0 calc(50% - 10px); /* 平分宽度，减去gap的一半 */
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="custom-box">
        <div class="box-title">Dropdown Menu</div>
        <div class="box-content">
            Sample Text
        </div>
        <button class="custom-button" id="dropdown-button">Click Me</button>
        <div class="dropdown-content" id="dropdown-menu">
            <div class="dropdown-item">Item 1</div>
            <div class="dropdown-item">Item 2</div>
            <div class="dropdown-item">Item 3</div>
            <div class="dropdown-item">Item 4</div>
        </div>
    </div>
    <script>
        const dropdownButton = document.getElementById('dropdown-button');
        const dropdownMenu = document.getElementById('dropdown-menu');
        dropdownButton.addEventListener('click', () => {
            dropdownMenu.style.display = dropdownMenu.style.display === 'none' ? 'flex' : 'none';
        });
    </script>
</body>
</html>

关键修改点：

• 给.dropdown-content添加flex-wrap: wrap允许换行
• 给.dropdown-item设置flex: 0 0 calc(50% - 10px)，让每个选项占一半宽度，同时减去间距的一半避免溢出
• 固定容器宽度可以让布局更稳定

你之前尝试没成功，大概率是因为没给Flex容器加flex-wrap: wrap，或者Grid的列数设置错误，不用额外套wrapper就能解决。

内容的提问来源于stack exchange，提问作者s.ha11