HTML布局：使用CSS Grid实现单个逻辑列下的多子列组织

    

        
        

            Date Inquiry
            
        
        

            Date Responded
            
        
        

            Source
            
        
        

            Location
            
        

        
        

            
Name Details
            

                

                    First Name
                    
                
                

                    Middle Name
                    
                
                

                    Last Name
                    
                
            
        

        
        

            Contact Number
            
        
        

            Size Inquiry
            
        
        

            Category
            
            
        
        

            Recipient
            
        
        

            Email
            
        
        
    
    

        Save Records
    

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和清晰的布局有助于屏幕阅读器理解页面结构。确保表单元素都有对应的`