Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    You need to add grid-template-rows: 100px repeat(3, 25px); property to the grid class and remove the .top class from both css & html

    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);  /* change here */
    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;
}

    HTML

    Change this:

    <div class="grid">
        <span class="top"></span>
        <span class="top">name</span>
        <span class="top">city</span>
        <span class="top">dob</span>

    To this:

    <div class="grid">
        <span>name</span>
        <span>city</span>
        <span>dob</span>
    Login or Signup to reply.
  3. 0

    What you can do is specify the size you want to give to first row and after that add repeat() function for remaining rows.

    For example,

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

    This code will set the height of first row as 50px and after that it will give the remaining 3 lines 25px of height each. Like this, you can add specific height if you want to each of the row that you want to customise.

    Another example,

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

    This code will set the height of first row to 50px, then after that next two rows will be set 25px each and last row will be set to 100px of height.
    Be careful though when using this. Use this way only if you are absolutely sure of the number of lines in your grid template, otherwise it may create some weird structure or break the ui.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search