Почему сетка не формируется? - PullRequest
Новая
       2

Почему сетка не формируется?

0 голосов
/ 19 сентября 2019

Сетка не формируется правильно.Как мне это исправить?

Я пытался сделать id букв абзацев вместо цифр. 

<!DOCTYPE html>
<head>
<script>
</script>
<style>
.board {
    background-image: url("board.jpg");
    border-style: solid;
    width: 80px;
    height: 80px;
}
.pit {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
}
</style>
</head>
<body bgcolor = "beige">
<div class = "board">
<div class = "pit"><p id = "1">4</p></div>
<div class = "pit"><p id = "2">4</p></div>
<div class = "pit"><p id = "3">4</p></div>
<div class = "pit"><p id = "4">4</p></div>
<div class = "pit"><p id = "5">4</p></div>
<div class = "pit"><p id = "6">4</p></div>
<div class = "pit"><p id = "7">4</p></div>
<div class = "pit"><p id = "8">4</p></div>
<div class = "pit"><p id = "9">4</p></div>
<div class = "pit"><p id = "10">4</p></div>
<div class = "pit"><p id = "11">4</p></div>
<div class = "pit"><p id = "12">4</p></div>
<div class = "pit"><p id = "13">4</p></div>
<div class = "pit"><p id = "14">4</p></div>
<div class = "pit"><p id = "15">4</p></div>
<div class = "pit"><p id = "16">4</p></div>
</div>
</body>
</html>

Я ожидаю, что абзацы будут в сетке.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

Дайте вашему .board это правило grid-template-columns: repeat(8, 1fr).Затем введите .pit divs, наберите flex и центрируйте содержимое в каждом из них.Ваши идентификаторы не могут начинаться с цифры, кстати: 

.board {
   background-image: url("board.jpg");
   border-style: solid;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
}

.pit{
   display: flex;
   align-items: center;
   justify-content: center;
}
<div class="board">
  <div class="pit">
    <p id="1">4</p>
  </div>
  <div class="pit">
    <p id="2">4</p>
  </div>
  <div class="pit">
    <p id="3">4</p>
  </div>
  <div class="pit">
    <p id="4">4</p>
  </div>
  <div class="pit">
    <p id="5">4</p>
  </div>
  <div class="pit">
    <p id="6">4</p>
  </div>
  <div class="pit">
    <p id="7">4</p>
  </div>
  <div class="pit">
    <p id="8">4</p>
  </div>
  <div class="pit">
    <p id="9">4</p>
  </div>
  <div class="pit">
    <p id="10">4</p>
  </div>
  <div class="pit">
    <p id="11">4</p>
  </div>
  <div class="pit">
    <p id="12">4</p>
  </div>
  <div class="pit">
    <p id="13">4</p>
  </div>
  <div class="pit">
    <p id="14">4</p>
  </div>
  <div class="pit">
    <p id="15">4</p>
  </div>
  <div class="pit">
    <p id="16">4</p>
  </div>
</div>
0 голосов
/ 19 сентября 2019

Очевидно, у меня нет изображения вашей доски.

display: grid; и grid-template-columns: auto ... переходят в стиль доски, чтобы действовать как контейнер.

Затем стиль pit чтобы быть "ячейками" в сетке.

Я изменил ваши стили на: 

<style>
.board {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    background-image: url("board.jpg");
    border-style: solid;
    width: auto;
    height: auto;
}
.pit {
  padding: 20px;
  font-size: 20px;
  text-align: center;
}
</style>

Что выглядело так: (конечно, это может потребоваться настроить в соответствии с вашими потребностями) enter image description here

Что было свободно основано на примере использования сетки отсюда .

...