Блог

Главная - Вопросы по программированию - Моя css-сетка перепутана, она показывает поля слева и снизу

Моя css-сетка перепутана, она показывает поля слева и снизу

#html #css

#HTML #css

Вопрос:

Я создаю tictactoe с помощью css gridlayout, и я кое-что понял в своей программе.

Вот изображение:

В левой и нижней части есть поля, и я не использовал никаких полей, я думаю, это потому, что я перепутал свою css-сетку? Как мне это исправить?

Вот мой код:

 <!DOCTYPE html>
<html>
<head>
    <style type="text/css">

* {
    margin:0;
    padding:0;
}


#container {
    display:grid;
    grid-template-rows:repeat(3, 1fr);
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:3px;
}


.btn {
    height:250px;
    width:100%;
    background:black;
}
.pos {
    position:relative;
    top:20%;
    left:17.5%;
    color:white;
    font-size:30vw;
    transform:scale(1, 2);
}

    </style>
</head>
<body>

    <div id="container" >
        <div class="btn" id="btn1" ><p class="pos" >X</p></div>
        <div class="btn" id="btn2" ><p class="pos" ></p></div>
        <div class="btn" id="btn3" ><p class="pos" ></p></div>
        <div class="btn" id="btn4" ><p class="pos" ></p></div>
        <div class="btn" id="btn5" ><p class="pos" ></p></div>
        <div class="btn" id="btn6" ><p class="pos" >X</p></div>
        <div class="btn" id="btn7" ><p class="pos" ></p></div>
        <div class="btn" id="btn8" ><p class="pos" ></p></div>
        <div class="btn" id="btn9" ><p class="pos" ></p></div>
    </div>
</body>
</html>

Я застрял здесь в этом беспорядке, потому что я не знаю, как это исправить.

Ответ №1:

Я не знаю, понимаете ли вы, что на больших экранах весь контент не отвечает, X находится вне поля. Это потому, что вы установили высоту .btn в 250 пикселей. В любом случае, я внес некоторые изменения, просто прокомментировав пару строк в вашем коде, поэтому содержимое должно умещаться независимо от того, насколько велик или мал экран. Я также добавил пару строк в ваш #container, чтобы расширить содержимое до края. Смотрите демонстрацию ниже

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #container {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 3px;
        height: 100%;
        width: 100%; /* Add this line */
        overflow-x: hidden; /* Add this line */
      }

      .btn {
        /* height: 250px; remove this line*/
        width: 100%;
        background: black;
      }
      .pos {
        position: relative;
        top: 20%;
        left: 17.5%;
        color: white;
        font-size: 30vw;
        /* transform: scale(1, 2); remove this line */
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="btn" id="btn1"><p class="pos">X</p></div>
      <div class="btn" id="btn2"><p class="pos"></p></div>
      <div class="btn" id="btn3"><p class="pos"></p></div>
      <div class="btn" id="btn4"><p class="pos"></p></div>
      <div class="btn" id="btn5"><p class="pos"></p></div>
      <div class="btn" id="btn6"><p class="pos">X</p></div>
      <div class="btn" id="btn7"><p class="pos"></p></div>
      <div class="btn" id="btn8"><p class="pos"></p></div>
      <div class="btn" id="btn9"><p class="pos"></p></div>
    </div>
  </body>
</html>