如何使 CSS 网格中只有顶行的高度比其他行高？

问题描述 投票：0回答：2

为这个垂直表格使用 css 网格，我希望顶行高度比其他行大。我怎样才能做到，例如，100px？我相信 

grid-template-rows: repeat(4, 25px);
控制高度......但我还没有想出一种方法将其应用于单个顶行。

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>

html css css-grid
2个回答
1
投票

你可以使用

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

repeat(4, 25px)
是 
25px 25px 25px 25px
的语法糖，因此您可以根据您的示例将第一个 
25px
替换为 
100px
。

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>

0
投票


您需要将 

grid-template-rows: 100px repeat(3, 25px);
属性添加到网格类，并从 css 和 html 中删除 .top 类

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
改变这个：

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

对此：

<div class="grid">
        <span>name</span>
        <span>city</span>
        <span>dob</span>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.