无法使用 CSS 网格垂直扩展网格模板行

时间：2021-02-01 07:59:10

标签： html css css-grid

我目前的导航栏分辨率为 1280 像素，如下所示：

enter image description here

为了使其具有响应性，我希望在徽标图像达到 1080 像素时将标题置于其底部。以下是我希望它完全拥有的示例：

enter image description here

我一直在使用 CSS Grid 来划分列和行。我正在使用媒体查询使我的网站响应，但由于某种原因，当我尝试增加 CSS 中 grid-template-rows 元素的大小时，没有任何效果。

到目前为止，这是我得到的：

enter image description here

我只能假设标题隐藏在图像后面，因为该行不够大，无法容纳在其下方。我不确定如何修复我的代码。

HTML

@media only screen and (max-width: 1280px) {
  .main {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr;
    grid-template-areas:
      "nav nav nav nav"
      "main-heading main-heading main-heading main-heading"
      "sub-heading sub-heading sub-heading sub-heading"
      "icons icons icons icons"
      "images images images contents";
    grid-gap: 0.2rem;
  }

  #navbar {
    display: inline-block;
    grid-area: nav;
    background: orange;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
  }

  #navbar img, header, ul, li {
    display: inline-block;
    vertical-align: middle;
  }

  #navbar img {
    border-radius: 50%;
    margin-left: 20px;
    top: -13px;
    position: absolute;
  }

  h3 {
    margin-left: 120px;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*display: inline-block;*/
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }

  li {
    display: inline-block;
    padding: 12px;
  }

  #main-heading {
    grid-area: main-heading;
    background: yellow;
    font-weight: bold;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sub-heading {
    grid-area: sub-heading;
    background: pink;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #icons {
    grid-area: icons;
    background: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #icons img {
    padding: 30px;
  }

  #images {
    grid-area: images;
    background: orange;
  }

  #images_heading {
    margin-left: 20px;
  }

  #images img {
    margin-left: 30px;
    padding: 15px;
  }

  #contents {
    grid-area: contents;
    background: brown;
  }

  #contents_first img {
    float:left;
  }

  #contents_first h5 {
    font-size: 15px;
  }
  /*#contents_first {
    display: flex;
    margin-left: 10px;
  }*/

  /*#contents_first h5 {
    float: right;
    margin-left: 20px;
  }/*

  /*#contents_first h5 {
    margin-top: 3px;
    margin-left: 10px;
    font-size: 15px;
  }*/

  #contents_second img {
    float:left;
  }

  #contents_second h5 {
    font-size: 15px;
  }

  #contents_third img {
    float: left;
  }

  #contents_third h5 {
    font-size: 15px;
  }

  #contents_fourth img {
    float: left;
  }

  #contents_fourth #name {
    font-size: 17px;
  }

  footer {
    text-align: right;
  }
}








@media only screen and (max-width: 1080px)
{
  .main {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    grid-template-rows: 0.2fr 0.4fr 0.2fr 0.70fr 0.45fr 0.1fr;
    grid-template-areas:
      "nav nav nav nav"
      "main-heading main-heading main-heading main-heading"
      "sub-heading sub-heading sub-heading sub-heading"
      "icons icons icons icons"
      "images images images images"
      "contents contents contents contents";
    grid-gap: 0.2rem;
  }

  #navbar {
    display: inline-block;
    grid-area: nav;
    background: ;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
  }

  #navbar img, header, ul, li {
    display: inline-block;
    vertical-align: middle;
  }

  #navbar img {
    border-radius: 50%;
    margin-left: 500px;
    top: -13px;
    position: absolute;
  }

  h3 {
    margin-left: 450px;
    margin-bottom: -900px;
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*display: inline-block;*/
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }

  li {
    display: inline-block;
    padding: 12px;
  }

  #main-heading {
    grid-area: main-heading;
    background: yellow;
    font-weight: bold;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sub-heading {
    grid-area: sub-heading;
    background: pink;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #icons {
    grid-area: icons;
    background: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #icons img {
    padding: 30px;
  }

  #images {
    grid-area: images;
    background: orange;
  }

  #images_heading {
    margin-left: 20px;
  }

  #images img {
    margin-left: 30px;
    padding: 15px;
  }

  #contents {
    grid-area: contents;
    background: brown;
  }

  #contents_first img {
    float:left;
  }

  #contents_first h5 {
    font-size: 15px;
  }
  /*#contents_first {
    display: flex;
    margin-left: 10px;
  }*/

  /*#contents_first h5 {
    float: right;
    margin-left: 20px;
  }/*

  /*#contents_first h5 {
    margin-top: 3px;
    margin-left: 10px;
    font-size: 15px;
  }*/

  #contents_second img {
    float:left;
  }

  #contents_second h5 {
    font-size: 15px;
  }

  #contents_third img {
    float: left;
  }

  #contents_third h5 {
    font-size: 15px;
  }

  #contents_fourth img {
    float: left;
  }

  #contents_fourth #name {
    font-size: 17px;
  }

  footer {
    text-align: right;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive J Web</title>
  <link rel="stylesheet" href="Lab04.css">
</head>
<body>
  <div class = "main">
    <section id = "navbar">
      <img src="lens.jpg" alt=lens width=90px height=90px>
      <header>
        <h3>
          Art of Photography
        </h3>
      </header>
      <ul>
        <li><div class="navbar_left">Photography</div></li>
        <li><div class="navbar_left">History</div></li>
        <li><div class="navbar_right">Samples</div></li>
        <li><div class="navbar_right">About</div></li>
      </ul>
    </section>
    <section id = "main-heading">SELF-PORTRAIT & STREET PHOTOGRAPHY
    </section>
    <div id = "sub-heading">FROM VANCOUVER, BC</div>
    <div id = "icons">
      <img src="first_circle.png" alt="first_circle" width=70px height=70px>
      <img src="second_circle.png" alt="second_circle" width=70px height=70px>
      <img src="third_circle.png" alt="third_circle" width=70px height=70px>
      <img src="fourth_circle.png" alt="fourth_circle" width=70px height=70px>
    </div>

    <div id = "images">
      <p id = "images_heading">Navigation page</p>
      <img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=250px height=140px>
      <img src="camera_guy.jpg" alt="camera_guy" width=250px height=140px>
      <img src="graph.jpg" alt="graph" width=250px height=140px>
      <img src="rolliflex.jpg" alt="graph" width=250px height=140px>
    </div>
    <div id="contents">
      <p id = "contents_heading">
        News
      </p>
      <section id = "contents_first">
        <img src="camera_atmosphere.jpg" alt="camera_atmosphere" width=50px height=50px>
        <h5>PHOTO CAPTURED IN VANCOUVER, STANLEY PARK.</h5>
      </section>
      <section id ="contents_second">
        <img src="camera_guy.jpg" alt="camera_guy" width=50px height=50px>
        <h5>CAMERA GUY WHO ALWAYS LOOK FOR ADVENTURE.</h5>
      </section>
      <section id = "contents_third">
        <img src="first_circle.png" alt="first_circle" width=50px height=50px>
        <h5>CIRCLE CAPTURED IN SOMEWHERE IN THE WORLD.</h5>
      </section>
      <br/>
      <section id = "contents_fourth">
        <img src="mail_icon.jpg" alt="mail_icon" width= 20px height=20px>
        <p id="name">J<span style="font-weight:bold">A</span></p>
        <p id="name_info">Please reach out to J A for more information.</p>
        <footer>&copy; J A</footer>
      </section>
    </div>
  </div>
</body>

1 个答案:

答案 0 :(得分：0)

不要使用'1fr'，而是使用'auto'

你可以这样做

grid-template: auto 1fr auto/ auto 1fr auto;
相关问题
最新问题