CSS Grid（grid-template-areas）布局问题：表格未按预期展示

尝试用CSS Grid实现两个6列表格（各含1表头行+1数据行），但布局展示不符合预期。预期表格结构如下：

第一个表格：

Nome     Espécie      Raça         Sexo       Idade     Descrição
Teto      Rara      Céu Azul     Masculino     19        Fashion

第二个表格：

Nome     Espécie      Raça         Sexo       Idade     Descrição
Wiu      Pitbull      Limão      Masculino     18         Frio

错误原因分析 #

• Grid模板语法错误：grid-template-areas中存在无效语法"item2''item2 item2 item2 item2 item2"，多余的单引号破坏了网格区域定义，导致布局错位。
• 元素输出顺序不匹配：PHP输出元素的顺序和grid-template-areas定义的布局顺序不一致，Grid按模板区域定位元素时易出现显示异常。
• 图片尺寸溢出：图片设置固定宽高，可能撑破Grid单元格，导致布局变形。

修正方案及代码 #

修正后的CSS代码 #

body {
  background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
}

.item1 { grid-area: item1; }
.item3 { grid-area: item3; }
.item5 { grid-area: item5; }
.button1 { grid-area: button1; }

.headernome1 { grid-area: headernome1; }
.headerespecie1 { grid-area: headerespecie1; }
.headerraca1 { grid-area: headerraca1; }
.headersexo1 { grid-area: headersexo1; }
.headeridade1 { grid-area: headeridade1; }
.headerdescricao1 { grid-area: headerdescricao1; }

.celnome1 { grid-area: celnome1; }
.celespecie1 { grid-area: celespecie1; }
.celraca1 { grid-area: celraca1; }
.celsexo1 { grid-area: celsexo1; }
.celidade1 { grid-area: celidade1; }
.celdescricao1 { grid-area: celdescricao1; }

.item2 { grid-area: item2; }
.item4 { grid-area: item4; }
.item6 { grid-area: item6; }
.button2 { grid-area: button2; }

.headernome2 { grid-area: headernome2; }
.headerespecie2 { grid-area: headerespecie2; }
.headerraca2 { grid-area: headerraca2; }
.headersexo2 { grid-area: headersexo2; }
.headeridade2 { grid-area: headeridade2; }
.headerdescricao2 { grid-area: headerdescricao2; }

.celnome2 { grid-area: celnome2; }
.celespecie2 { grid-area: celespecie2; }
.celraca2 { grid-area: celraca2; }
.celsexo2 { grid-area: celsexo2; }
.celidade2 { grid-area: celidade2; }
.celdescricao2 { grid-area: celdescricao2; }

.grid-container {
  display: grid;
  background-image: linear-gradient(to bottom, #FFFFD2, #AA96DA, #FFFFD2);
  padding: 5px;
  /* 修复语法错误，按逻辑顺序定义网格区域 */
  grid-template-areas:
    "item1 item1 item1 item1 item1 item1"
    "item3 item3 item3 item3 item3 item3"
    "item5 item5 item5 item5 item5 item5"
    "headernome1 headerespecie1 headerraca1 headersexo1 headeridade1 headerdescricao1"
    "celnome1 celespecie1 celraca1 celsexo1 celidade1 celdescricao1"
    "button1 button1 button1 button1 button1 button1"
    "item2 item2 item2 item2 item2 item2"
    "item4 item4 item4 item4 item4 item4"
    "item6 item6 item6 item6 item6 item6"
    "headernome2 headerespecie2 headerraca2 headersexo2 headeridade2 headerdescricao2"
    "celnome2 celespecie2 celraca2 celsexo2 celidade2 celdescricao2"
    "button2 button2 button2 button2 button2 button2";
  /* 让6列宽度自适应相等，保证表格列对齐 */
  grid-template-columns: repeat(6, 1fr);
}

.grid-container > div {
  background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
}

/* 修复图片溢出问题 */
.grid-container img {
  max-width: 100%;
  height: auto;
}

.caixa {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
  width: 85%;
  border: 2px solid #99ccff;
  padding: 10px;
}

修正后的PHP/HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    <!-- 将上面的CSS代码粘贴到此处 -->
  </style>
</head>
<body>
  <center>
    <div class='caixa'>
      <?php
        $codigo = 1;
        $dois = 2;
        echo "<div class='grid-container'>";
        
        // 第一个宠物元素：严格按Grid模板顺序输出
        echo "<div class='item1'>Foto do Pet</div>";
        echo "<div class='item3'><input form='editfoto' type='file' name='foto$codigo' accept='image/*'></div>";
        echo "<div class='item5'><img name='imagem$codigo' id='NOVOimagem$codigo' src='https://www.w3schools.com/images/w3schools_green.jpg' /></div>";
        
        // 第一个表格表头
        echo "<div class='headernome$codigo'>Nome</div>";
        echo "<div class='headerespecie$codigo'>Espécie</div>";
        echo "<div class='headerraca$codigo'>Raça</div>";
        echo "<div class='headersexo$codigo'>Sexo</div>";
        echo "<div class='headeridade$codigo'>Idade</div>";
        echo "<div class='headerdescricao$codigo'>Descrição</div>";
        
        // 第一个表格数据行
        echo "<div class='celnome$codigo'>Teto</div>";
        echo "<div class='celespecie$codigo'>Rara</div>";
        echo "<div class='celraca$codigo'>Céu Azul</div>";
        echo "<div class='celsexo$codigo'>Masculino</div>";
        echo "<div class='celidade$codigo'>19</div>";
        echo "<div class='celdescricao$codigo'>Fashion</div>";
        
        echo "<div class='button$codigo'><button type='button' id='botao_salvar_$codigo' onclick='salvar_registro($codigo)'>Salvar</button></div>";
        
        // 第二个宠物元素：严格按Grid模板顺序输出
        echo "<div class='item2'>Foto do Pet</div>";
        echo "<div class='item4'><input form='editfoto' type='file' name='foto$dois' accept='image/*'></div>";
        echo "<div class='item6'><img name='imagem$dois' id='NOVOimagem$dois' src='https://www.w3schools.com/images/w3schools_green.jpg' /></div>";
        
        // 第二个表格表头
        echo "<div class='headernome$dois'>Nome</div>";
        echo "<div class='headerespecie$dois'>Espécie</div>";
        echo "<div class='headerraca$dois'>Raça</div>";
        echo "<div class='headersexo$dois'>Sexo</div>";
        echo "<div class='headeridade$dois'>Idade</div>";
        echo "<div class='headerdescricao$dois'>Descrição</div>";
        
        // 第二个表格数据行
        echo "<div class='celnome$dois'>Wiu</div>";
        echo "<div class='celespecie$dois'>Pitbull</div>";
        echo "<div class='celraca$dois'>Limão</div>";
        echo "<div class='celsexo$dois'>Masculino</div>";
        echo "<div class='celidade$dois'>18</div>";
        echo "<div class='celdescricao$dois'>Frio</div>";
        
        echo "<div class='button$dois'><button type='button' id='botao_salvar_$dois' onclick='salvar_registro($dois)'>Salvar</button></div>";
        
        echo "</div>";
      ?>
    </div>
  </center>
</body>
</html>

额外优化说明 #

• 添加grid-template-columns: repeat(6, 1fr)，让6列宽度自适应相等，保证表格列对齐。
• 给图片设置max-width:100%; height:auto;，避免图片溢出单元格。
• 修正按钮ID重复问题（原代码两个按钮ID均为botao_salvar，改为带编号的ID），避免JS选择元素出错。

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