HTML布局：利用CSS Grid实现嵌套三列布局的专业指南

<div class="main-content-area">
    <h2>用户信息登记</h2>

    <div class="form-group-container">
        <label class="group-title">个人基本信息</label>
        <div class="three-column-wrapper">
            <div class="form-field">
                <label for="firstName">姓氏:</label>
                <input type="text" id="firstName" name="firstName" class="form-control">
            </div>
            <div class="form-field">
                <label for="middleName">中间名:</label>
                <input type="text" id="middleName" name="middleName" class="form-control">
            </div>
            <div class="form-field">
                <label for="lastName">名字:</label>
                <input type="text" id="lastName" name="lastName" class="form-control">
            </div>
        </div>
    </div>

    <div class="form-group-container">
        <label class="group-title">联系方式</label>
        <div class="three-column-wrapper">
            <div class="form-field">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" class="form-control">
            </div>
            <div class="form-field">
                <label for="phone">电话:</label>
                <input type="tel" id="phone" name="phone" class="form-control">
            </div>
            <div class="form-field">
                <label for="address">地址:</label>
                <input type="text" id="address" name="address" class="form-control">
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
</div>

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}

.main-content-area {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.form-group-container {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #fdfdfd;
}

.group-title {
    display: block; /* 确保标题独占一行 */
    font-size: 1.1em;
    font-weight: bold;
    color: #555;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
}

/* 核心：实现三列布局 */
.three-column-wrapper {
    display: grid; /* 激活Grid布局 */
    grid-template-columns: repeat(3, 1fr); /* 定义三列，每列占据可用空间的1/3 */
    gap: 20px; /* 设置列与列之间的间距 */
    align-items: start; /* 使内容顶部对齐 */
}

.form-field {
    display: flex; /* 使用Flexbox使标签和输入框垂直排列 */
    flex-direction: column;
    margin-bottom: 10px; /* 字段内部的垂直间距 */
}

.form-field label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
    font-size: 1em;
}

.btn-primary {
    display: block;
    width: 150px;
    padding: 12px 20px;
    margin: 30px auto 0;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    text-align: center;
    transition: background-color 0.3s ease;
}

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