Grid容器布局求助：文本无法填充图片下方网格区域

问题原因 #

你当前的布局问题核心在于网格区域的分配错误：

• #myText 设置了 grid-area: 1 / 1 / 3 / 3，这会让它仅占据第1-2行的第1-2列，完全无法延伸到第二、三行的第三列。
• 图片未指定网格位置，Grid自动布局会让它占据第一行第三列，但未限制高度的情况下，图片会被拉伸至容器全高，视觉上看起来占满第三列所有行。

解决方案 #

通过grid-template-areas明确划分网格区域，让文本容器覆盖第一行前两列、第二三行全部三列，同时给图片指定专属网格区域，即可实现目标布局。

修改后的完整代码 #

CSS 部分

.grid-container {
    height: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
    "text text img"
    "text text text"
    "text text text";
    gap: 8px; /* 可选，优化元素间距 */
}

#myText {
    grid-area: text;
    padding: 10px; /* 可选，优化文本内边距 */
    word-break: break-all; /* 让长文本自动换行填满区域 */
}

.grid-container img {
    grid-area: img;
    object-fit: cover; /* 保持图片比例，避免拉伸变形 */
    width: 100%;
    height: 100%;
}

HTML 部分（结构无需调整）

<div class="grid-container">
    <div id="myText"></div>
    <img src="Images/grad3.png">
</div>

脚本部分（无需修改）

动态生成的文本会自动填充#myText所覆盖的全部网格区域，打字机脚本和弹窗逻辑不影响布局效果。

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