How to make only top row larger in height than other rows in CSS grid?

May 5, 2023

Using css grid for this vertical table, I want the top row height to be larger than the other rows. How can I make it, for example, 100px? I believe grid-template-rows: repeat(4, 25px); controls the height… but I have not figured out a way to apply that to just a single top row.

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: repeat(4, 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 {
 grid-template-rows: repeat(4, 100px);
}

<!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">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <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>

>Solution :

You could use grid-template-rows: 100px repeat(3, 25px).

repeat(4, 25px) is syntactical-sugar for 25px 25px 25px 25px, so you can replace the first 25px for 100px as per your example.

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 {
 grid-template-rows: repeat(4, 100px);
}

<!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">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <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>