嵌套HTML/CSS Grid失效求助：表单布局异常排查

核心问题总结 #

1. HTML结构错误：<lang="en"> 是无效标签，正确写法是 <html lang="en">，缺失根标签会导致浏览器渲染异常。
2. 嵌套Grid未实际启用：你定义了#ingrid作为嵌套Grid容器，但页面中没有任何元素使用这个ID；给form加了.form类，却没给.form设置display: grid，导致内部元素无法按Grid布局排列。
3. Grid区域重复赋值：.inform类重复设置grid-area: l; grid-area: m; grid-area: r;，CSS中重复属性会取最后一个值，所有.inform元素都会挤在r区域。
4. 多个元素共用同一Grid区域：大量.midform元素都设置grid-area: m，它们会重叠在同一区域，无法正常排列。
5. 外层Grid定义冗余区域：grid-template-areas里的f（footer）没有对应元素，属于冗余代码。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Form</title>
    <style>
        #grid {
            display: grid;
            grid-template-columns: 160px auto;
            grid-template-rows: 150px auto 100px;
            grid-template-areas:
                "h h"
                "n g"
                "f f";
            gap: 10px;
        }
        .form {
            grid-area: g;
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-areas:
                "l m r";
            padding: 5px;
            margin-top: 20px;
            margin-bottom: 20px;
            border: 2px solid #000;
            gap: 15px;
        }
        #header {
            grid-area: h;
            background-color: #DBA3EE;
            color: #FFF;
            line-height: 250%;
            font-family: Arial, Verdana, sans-serif;
            font-weight: bold;
            font-size: 72px;
            text-indent: 20px;
        }
        #nav {
            grid-area: n;
            background-color: #15394F;
            color: #FFF;
            font-family: Arial, Verdana, sans-serif;
            font-weight: bold;
            font-size: 25px;
            text-indent: 2px;
            padding: 8px;
        }
        .inform {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
        }
        .midform {
            grid-area: m;
        }
        .rightform {
            grid-area: r;
        }
        .leftform {
            grid-area: l;
            align-self: center;
        }
        #footer {
            grid-area: f;
            background-color: #DBA3EE;
            color: #FFF;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body id="grid">
    <div id="header">HEADER</div>
    <div id="nav">Home<br>Main<br>Form<br></div>

    <form class="form">
        <div class="inform">
            <div class="midform">How would you like to be contacted? <br>
                <input type="radio" name="contact" value="email" checked="checked"> email <br>
                <input type="radio" name="contact" value="phone"> phone <br>
            </div>
            <div class="midform">Which course(s) are you registering? <br>
                <input type="checkbox" name="course" value="ACS-1805">ACS-1805<br>
                <input type="checkbox" name="course" value="ACS-1809">ACS-1809<br>
                <input type="checkbox" name="course" value="ACS-1903">ACS-1903<br>
            </div>
            <div class="midform">Payment Method: <input list="paymenttype" name="paymenttype"><br>
                <datalist id="paymenttype">
                    <option value="Debit">
                    <option value="MasterCard">
                    <option value="VISA">
                </datalist>
            </div>
        </div>

        <div class="inform">
            <div class="midform">Special Request<br>
                <textarea name="comments" id="sptextarea"></textarea><br>
            </div>
            <div class="leftform">
                <div>Rate Your Previous</div>
                <div>Experience (with 10 is</div>
                <div>the best): </div>
            </div>
            <div class="midform">
                <div>0<input type="range" min="1" max="10" step="1" value="5">10<br></div>
            </div>
            <div class="midform">
                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </div>
        </div>
    </form>
    <div id="footer">FOOTER</div>
</body>
</html>

额外优化说明 #

• 简化外层Grid列定义，160px auto足以实现导航栏+主内容的布局，更简洁。
• 给Grid容器添加gap属性，避免元素紧贴，提升可读性。
• 让.inform占满嵌套Grid所有列，实现表单区块的换行排列。
• 给.leftform添加align-self: center，让评分文字和滑块垂直居中对齐。
• 补充footer元素，对应外层Grid定义的f区域，完善布局结构。

内容的提问来源于stack exchange，提问作者Elaphe