CSS网格问题

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

基本上,此页面只是一团糟,除特殊问题外,我可能还需要一般性建议。

[尝试编码标准的Header,Hero图片,然后我要在下面放置文本和链接的图片(到目前为止还没有)。我将告诉各节转到特定的行和列,而不一定要到那里。

[此外,当我尝试在移动版Chrome开发工具中查看时,该视图始终会放大,我不确定为什么。我尝试将孩子divs换成数字标签,然后情况变得更糟,所以我又换回来了:不知道那是什么。

此外,我也希望网格为vh和vw的100%,但不是。

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="icon" href="Logo2.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PancakeArtwork.com Learning Page</title>
  <style>
    /*Mobile Style*/
    
    body {
      font-family: 'Montserrat', sans-serif;
      /*  background-image: radial-gradient(circle at 50% 34%, #cab062, #b38454, #99744f, #926252,#906050,#875647, #907551);*/
    }
    
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    
    .learningGrid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 15vh 15vh 15vh 15vh 15vh;
      height: 100vh;
      width: 100vw;
    }
    
    .header {
      grid-column: 1 / span 12;
      grid-row: 1 / span 2;
      background-color: gold;
      height: 15vh;
      width: 100vw;
      min-height: 1px;
    }
    
    .logo {
      grid-column: 1 / 4;
      width: 15vw;
      height: 15vh;
    }
    
    .title {
      grid-column-start: 2;
      grid-column-end: 10;
      grid-row-start: 1;
      grid-row-end: 2;
      text-align: center;
      font-size: 4vw;
      color: brown;
    }
    
    .aboutUs {
      grid-column-start: 10;
      grid-column-end: 12;
      grid-row-start: 1;
      grid-row-end: 2;
      font-size: 3vw;
      color: brown;
    }
    
    .hero {
      grid-column-start: 1;
      grid-column-end: 12;
      grid-row-start: 2;
      grid-row-end: 4;
    }
    
    .adviceColumn {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 4;
      grid-row-end: 5;
      font-size: 5vw;
      justify-content: center;
      align-content: center;
      color: brown;
    }
    
    .newsColumn {
      grid-column-start: 3;
      grid-column-end: 6;
      grid-row-start: 4;
      grid-row-end: 5;
      font-size: 5vw;
      justify-content: center;
      align-content: center;
      color: brown;
    }
    
    .communityColumn {
      grid-column-start: 6;
      grid-column-end: 9;
      grid-row-start: 4;
      grid-row-end: 5;
      font-size: 5vw;
      justify-content: center;
      align-content: center;
      color: brown;
    }
  </style>
</head>

<body>
  <div class="learningGrid">
    <div class="header">
      <div class="logo">
        <a href="index.html" title="PancakeArtwork.com navigation page"><img src="Logo2.jpeg" class="logo" alt="PancakeArtwork.com - Navigation Page"></a>
      </div>
      <div class="title">PancakeArtwork.com <br> Learning Page</div>
      <div class="aboutUs">About Us</div>
    </div>


    <div class="hero"><img src="books2.jpg" alt="Picture of Books to Represent Learning" ;></div>
    <main>
      <div class="adviceColumn">Advice</div>
      <div class="newsColumn">News</div>
      <div class="communityColumn">Community</div>
    </main>
  </div>

</body>

</html>

基本上,此页面只是一团糟,除了特殊问题外,我可能还需要一般性建议。尝试编写标准标题Header图像,然后我要放置文本和链接的图像...

css css-grid
2个回答
0
投票

Lazarus收到了很多反馈。最终,使用CSS创建表比尝试使用Grid进行结构设计要有效得多,因此我放弃了网格并使用表放置了项。


0
投票

@@ Lazarus我认为您遇到的主要问题是learningGrid仅具有三个直接子代:标头,英雄和主要。当您将其设置为显示网格时,只能在网格中为这三个子项指定位置。您可以在这些元素的每个元素上使用其他网格,以依次放置其子元素。 –拉撒路2天前

热门问题
推荐问题
最新问题