<form action="codeadd.php" method="POST" class="form-container">
    <div class="form-grid-wrapper">
        <!-- 第一行字段 -->
        <div class="form-group">
            <label for="date_inquiry">Date Inquiry</label>
            <input type="date" id="date_inquiry" name="date_inquiry" class="form-control" />
        </div>
        <div class="form-group">
            <label for="date_responded">Date Responded</label>
            <input type="date" id="date_responded" name="date_responded" class="form-control" />
        </div>
        <div class="form-group">
            <label for="source">Source</label>
            <input type="text" id="source" name="source" class="form-control" />
        </div>
        <div class="form-group">
            <label for="location">Location</label>
            <input type="text" id="location" name="location" class="form-control" />
        </div>

        <!-- 姓名信息：单个逻辑列下的三个子列 -->
        <fieldset class="form-group-fieldset name-details-section">
            <legend>Name Details</legend>
            <div class="name-fields-grid">
                <div class="form-group">
                    <label for="firstname">First Name</label>
                    <input type="text" id="firstname" name="firstname" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="middlename">Middle Name</label>
                    <input type="text" id="middlename" name="middlename" class="form-control" />
                </div>
                <div class="form-group">
                    <label for="lastname">Last Name</label>
                    <input type="text" id="lastname" name="lastname" class="form-control" />
                </div>
            </div>
        </fieldset>

        <!-- 其他字段 -->
        <div class="form-group">
            <label for="contact_no">Contact Number</label>
            <input type="number" id="contact_no" name="contact_no" class="form-control" maxlength="11" />
        </div>
        <div class="form-group">
            <label for="size_inquiry">Size Inquiry</label>
            <input type="text" id="size_inquiry" name="size_inquiry" class="form-control" />
        </div>
        <div class="form-group">
            <label for="category">Category</label>
            <input class="form-control" id="category" name="category" type="text" list="brands" />
            <datalist id="brands">
                <option>Option 1</option>
                <option>Option 2</option>
            </datalist>
        </div>
        <div class="form-group">
            <label for="recipient">Recipient</label>
            <input type="text" id="recipient" name="recipient" class="form-control" />
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" id="email" name="email" class="form-control" />
        </div>
        <!-- 更多字段... -->
    </div>
    <div class="form-actions">
        <button type="submit" name="submit" class="btn btn-primary">S*e Records</button>
    </div>
</form>

CSS样式 (实现Grid布局)

/* 基础样式，可根据您的CSS框架（如Bootstrap）进行调整 */
.form-control {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保padding和border不增加元素总宽度 */
}

.btn-primary {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* 主网格容器 */
.form-grid-wrapper {
    display: grid;
    /* 定义4列，每列等宽 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* 列和行之间的间距 */
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

/* 单个表单组的样式 */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* 让grid的gap处理间距 */
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* 姓名详情区域的样式，它是一个主网格项，但它自己内部又是一个网格容器 */
.name-details-section {
    grid-column: 1 / -1; /* 让这个fieldset跨越所有主网格列 */
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px; /* 与其他主网格项的间距 */
}

.name-details-section legend {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0 10px;
    color: #333;
}

/* 姓名字段的内部网格容器（实现3子列） */
.name-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 定义3个等宽的子列 */
    gap: 15px; /* 子列之间的间距 */
    margin-top: 10px;
}

/* 提交按钮区域 */
.form-actions {
    text-align: right;
    padding: 0 20px 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .form-grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 在小屏幕上减少列数 */
    }
    .name-fields-grid {
        grid-template-columns: 1fr; /* 在小屏幕上，姓名子列变为单列堆叠 */
    }
}

在上述示例中：

1. .form-container作为整个表单的外部容器。
2. .form-grid-wrapper是主网格容器，它定义了表单的主要布局，这里设置了repeat(auto-fit, minmax(250px, 1fr))来创建自适应的4列布局。
3. .name-details-section是一个fieldset元素，它本身是.form-grid-wrapper的一个网格项。我们通过grid-column: 1 / -1;让它横跨主网格的所有列，从而形成一个“单个逻辑列”的视觉效果。
4. .name-fields-grid是.name-details-section内部的一个div，它被定义为另一个网格容器 (display: grid;)。通过grid-template-columns: repeat(3, 1fr);，它内部的“姓氏”、“中间名”、“名字”字段被组织成了3个等宽的子列，实现了“单个逻辑列下的多子列”效果。
5. @media查询用于实现响应式设计，当屏幕宽度较小时，姓名子列会从3列变为单列堆叠，提升移动设备上的可读性。

注意事项与最佳实践

• 语义化HTML： 始终使用HTML标签的语义含义。用于表格数据，用于布局分组，fieldset/legend用于表单分组。
  响应式设计： CSS Grid天生适合响应式布局。结合repeat(auto-fit, minmax(...))和media queries可以轻松实现不同屏幕尺寸下的自适应布局。
  可访问性： 良好的语义化HTML和清晰的布局有助于屏幕阅读器理解页面结构。确保表单元素都有对应的`