如何在CSS Grid中仅让顶部行高度大于其他行？

要让垂直表格的顶部行高度为100px，其余行保持25px，你不需要给顶部单元格单独加行高样式，直接在Grid容器的grid-template-rows属性里单独定义第一行高度，再批量设置剩余行高度即可。

核心修改逻辑 #

你原来的grid-template-rows: repeat(4, 25px);会让所有4行统一为25px，改成以下写法就能实现需求：

grid-template-rows: 100px repeat(3, 25px);

这行代码的意思是：第一行（顶部表头行）高度设为100px，剩下3行数据行各25px，刚好匹配你的表格结构（1行表头+3行数据）。

另外你之前给.top类加grid-template-rows是无效的——.top是Grid容器的子项，grid-template-rows是Grid容器专属属性，只能作用于容器本身，不能直接给子元素设置。

修改后的完整代码 #

CSS

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

.grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
    /* 关键修改：单独指定第一行高度，批量设置剩余行 */
    grid-template-rows: 100px repeat(3, 25px);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.grid > span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

/* 可保留.top类给表头单元格加额外样式，比如加粗、居中 */
.top {
    font-weight: bold;
    display: flex;
    align-items: center;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="/style.css">
    <script src="/script.js" defer></script>
  </head>  
  <body>
<div class="grid">
        <span class="top"></span>
        <span class="top">name</span>
        <span class="top">city</span>
        <span class="top">dob</span>
    

        <span>Person 1</span>
        <span>Aaron Kris</span>
        <span>Philippines</span>
        <span>1991-05-23T14:19:51</span>
     
        <span>Person 2</span>
        <span>Simeon McLaughlin</span>
        <span>Singapore</span>
        <span>2012-03-07T00:08:36</span>
        
        <span>Person 3</span>
        <span>Kelsie Shanahan</span>
        <span>Brazil</span>
        <span>1985-03-10T20:13:04</span>
      
</div>
  </body>
</html>

补充说明 #

• grid-auto-flow: column的设置是正确的，它让Grid按列排列，形成垂直表格的结构。
• 如果后续数据行数变化，只需调整repeat()里的数字即可，比如新增2行数据，就改成grid-template-rows: 100px repeat(5, 25px);。

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