Question

我对这个论坛很陌生，对HTML和CSS也很陌生。

CSS Grid是我最近发现的，我恋爱了。它很容易使用。但是，有一件事我似乎无法做对。

我的问题是，您可以看到我添加了标题图片。当我添加图像时，所有框都与标题的高度相同。这就是我不想要的。

是的，我可以使用justify-self: center;和align-self: center;，但这并没有解决问题（我会在添加此代码时发布更多照片，但因为我不知道有超过10个代表我不能发布2个以上的链接。我希望你仍然可以理解这不能解决这个问题。）

有没有人知道我如何保留图像，并且仍然可以调整各个框的大小，使其成为我想要的尺寸，而不仅仅是按照网格上最大框的大小。

感谢您的帮助。我很感激。

以下是我试过的代码片段：

＆＃13;

body{
  background-color: #555555;
  color: #ffffff;
}

.container div:nth-child(even){
  background-color: #999999;
}

.container div:nth-child(odd){
  background-color: #727170;
}

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas:
  ". header header ."
  ". nav nav ."
  ". content sidebar ."
  ". footer footer .";
}

.header{
  grid-area: header;
  font-size: 50px;
}

.nav{
  grid-area: nav;
  font-size: 20px;
  justify-self: center;
  align-self: center;
}

.content{
  grid-area: content;
}

.sidebar{
  grid-area: sidebar;
}

.footer{
  grid-area: footer;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css">
    <title></title>
  </head>
  <body>
    <div class="container">

      <div class="header">
        <img src="./img/header.jpg"</img>
      </div>

      <div class="nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </div>

      <div class="content">Content</div>

      <div class="sidebar">Sidebar</div>

      <div class="footer">Copyright &copy 2017</div>

    </div>
  </body>
</html>

＆＃13;

Answer 1

您的代码正在使用fr，这意味着整个空间被划分为指定数量并具有相同的大小（如果它是列 - 宽度，行 - 高度）。您只需为带有标题或其他行的行指定适当的大小。

CSS Grid调整大小框

1 个答案: