如何在CSS网格中只让最上面一行的高度比其他行大？

4bbkushb 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(129)

使用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>

css

来源：https://stackoverflow.com/questions/76184876/how-to-make-only-top-row-larger-in-height-than-other-rows-in-css-grid

3条答案

按热度按时间

holgip5t1#

你可以使用grid-template-rows: 100px repeat(3, 25px)。
repeat(4, 25px)是语法-sugar，表示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）回复(0）举报 2023-05-08

g6baxovj2#

您需要将grid-template-rows: 100px repeat(3, 25px);属性添加到grid类，并从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>

赞(0）回复(0）举报 2023-05-08

4uqofj5v3#

你可以做的是指定第一行的大小，然后为剩下的行添加repeat()函数。
比如说

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

这段代码会将第一行的高度设置为50px，之后它会给予剩下的3行25px的高度。像这样，你可以添加特定的高度，如果你想每一行，你想自定义。
另一个例子，

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

这段代码将第一行的高度设置为50px，然后接下来的两行将设置为25px，最后一行将设置为100px的高度。使用时要小心。只有当你完全确定网格模板中的行数时才使用这种方法，否则它可能会创建一些奇怪的结构或破坏ui。

赞(0）回复(0）举报 2023-05-08

我来回答

如何在CSS网格中只让最上面一行的高度比其他行大？

3条答案

相关问题

热门标签

最新问答