CSS Grid布局异常：网格区域纵向排列而非预期布局求助

问题原因 #

你的所有网格子元素都设置了固定的width和height，这些硬编码的尺寸会强制元素脱离Grid轨道的约束，导致grid-template-areas定义的布局被覆盖，元素只能默认纵向排列。另外部分子元素的尺寸与你定义的网格轨道不匹配（比如Navigacija高度设为550px，但对应第三行轨道仅400px），进一步破坏了网格布局逻辑。

修复方案 #

1. 移除子元素的固定尺寸 #

删除所有子元素的width和height属性，让Grid的grid-template-rows和grid-template-columns来控制每个区域的大小，子元素会自动填充对应的网格轨道。

2. 调整网格轨道尺寸 #

将第三行轨道高度从400px改为550px，匹配你需要的内容高度；同时移除body的固定height，让布局自适应内容总高度。

修复后的完整CSS代码 #

body{
    width:1000px;
    display:grid;
    grid-template-rows:200px 50px 550px 50px ;
    grid-template-columns: 200px 800px;
    grid-template-areas: 
    "LogoStranice   NaslovStranice"
    "Info      Info"
    "Navigacija  Sadrzaj"
    "PotpisStranice  PotpisStranice";
    margin: auto;
}
.LogoStranice{
    background-color: #78fd94;
    grid-area: LogoStranice;
}
.NaslovStranice{
    background-color: #78fd94;
    text-align: center;
    padding-top: 40px;
    grid-area: NaslovStranice;
}
.Info{
    background-color: blue;
    color: white;
    grid-area: Info;
    padding: 15px 0;
}
.Navigacija{
    background-color: gray;
    font-size: 16px;
    font-weight: bold;
    grid-area: Navigacija;
}
.Sadrzaj{
    background-color:#d3e9d8 ;
    grid-area: Sadrzaj;
}
.tekst{
    padding: 30px 30px 30px 30px;
}
.PotpisStranice{
    grid-area: PotpisStranice;
    color: white;
    background-color: #2034fc;
    padding: 10px 0;
}
.Modifikacija{
    color:yellow;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

补充说明 #

• grid-template-areas与子元素grid-area的命名匹配无误，无需修改。
• 图片设置width:100%; height:100%;+object-fit:cover可让图片自适应网格区域，同时保持比例。
• 移除固定尺寸后，Grid会严格按照你定义的轨道和区域规则排列元素，解决纵向堆叠问题。

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