CSS Проблемы с сеткой - PullRequest
Новая
       2

CSS Проблемы с сеткой

0 голосов
/ 23 февраля 2020

По сути, эта страница просто беспорядок, и мне, возможно, понадобится общий совет в дополнение к конкретной проблеме.

Попытка кодировать стандартный заголовок, изображение героя, затем я хочу разместить текст и связанные изображения ниже ( еще не зашел так далеко). Я скажу разделы go определенной строке и столбцу, и они не обязательно go там.

Кроме того, когда я пытаюсь просмотреть в Chrome Dev для мобильных устройств, представление всегда увеличивать масштаб, и я не уверен почему. Я попытался изменить дочерний элемент divs на теги цифр, и все стало хуже, поэтому я изменил их обратно: не уверен, о чем идет речь.

Кроме того, я добавил, что хочу, чтобы сетка была 100% vh и VW, но это не так. 

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

1 Ответ

0 голосов
/ 25 февраля 2020

@ Lazarus Основная проблема, которую, я думаю, у вас возникает, заключается в том, что у learningGrid есть только три прямых потомка: header, hero и main. Когда вы устанавливаете отображение сетки, только этим трем дочерним элементам могут быть назначены позиции в сетке. Вы можете использовать дополнительные сетки на каждом из этих элементов, чтобы расположить их потомков по очереди. - Лазарь 2 дня go

...