HTML Grid布局：如何将Text单元格移至Picture列下方

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid</title>

        <style>
            body{
                margin: 0;
            }

            .container {
                width: 100vw;
                height: 100vh;
                font-family: 'Quicksand', sans-serif;
                font-weight: bold;
            
                display: grid;

                grid-template-columns: 0.5fr 1fr;
                grid-template-rows: 50px 1fr 1fr 100px;

                gap: 10px;
                padding: 10px;
                box-sizing: border-box;
            }

            .container div {
                border: 1px solid black;
            }
            .header {
                grid-column: 1 / 3;
            }
            .pic {
                grid-column: 1;
                grid-row: 2 / 3;
            }
            .text {
                grid-column: 1;
                grid-row: 3 / 4;
            }
        
        </style>

    </head>
    <body>

        <div class="container">
            <div class="header">Header</div>
            <div class="pic">Picture</div>
            <div class="text">Text  </div>
        </div>

    
    </body>
</html>

关键修改说明 #

• 给.pic明确指定布局位置：grid-column: 1（锁定左侧列），grid-row: 2 / 3（占据第二行）
• 调整.text的布局属性：
  • 替换原右侧列设置为grid-column: 1，将其移至左侧列
  • 修改行范围为grid-row: 3 / 4，让它固定在Picture的正下方
• 将.header的列范围简写为grid-column: 1 / 3，简化代码表述

这样就能实现Text单元格位于Picture所在列下方的预期布局。

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