Css Сетка-шаблон-область не работает в браузере - PullRequest
Новая
       7

Css Сетка-шаблон-область не работает в браузере

1 голос
/ 18 июня 2020
• 1000 ... я новичок в веб-разработке ... 
.first{
  grid-area: sys1;  
  width: 180px;
  height: 170px;
}

.second{
    grid-area: sys2;
    width: 180px;
height: 170px;
}
.third{

    grid-area: sys3;
}
.fourth{
    grid-area: sys4;
    width: 180px;
height: 170px;
}
.fifth{
    grid-area: sys5;
    width: 180px;
height: 170px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(1, 100%);
    grid-template-areas: "sys1 sys2 sys3 sys4  sys5";
}
@media(max-width:600px){
    .grid-container {
        display: grid;
        grid-template-columns: repeat(1,100%);
        grid-template-rows: 40px 4em 40px;
          grid-template-areas: "sys1 sys2"
                                     "sys3 sys3"
                                      "sys4 sys5"
                            }
}

  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href='./css/slider.css'>
    </head>
    <body>



        <div class="grid-container">
          <div class="first">1</div>
          <div class="second">2</div>
          <div class="third">3</div>  
          <div class="fourth">4</div>
          <div class="fifth">5</div>

      </div>

          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
          <script>
 </script>
</body>
</html>

enter image description here

этот фрагмент отлично работает здесь, но в chrome браузер не работает, показывает только пять div ..

1 Ответ

2 голосов
/ 18 июня 2020

Если вы новичок в web development и хотите перейти непосредственно к созданию Responsive layouts для своего веб-сайта, я рекомендую вам начать работу с bootstrap вместо того, чтобы записывать свой собственный css, это поможет вам много.

Я преобразовал ваш код в bootstrap, и он реагирует. Если вы измените размер screen, он сократится до запрошенного вами вывода, как указано в вашем image, но с гораздо меньшим code, это мощность bootstrap.

css просто дает height каждому div

.col-md-2,
.col-6 {
  height: 200px;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



<div class="container-fluid mt-4">
  <div class="row justify-content-center">
    <div class="col-md-2 col-6 bg-primary">
      <h1>1</h1>
    </div>
    <div class="col-md-2 col-6 bg-dark">
      <h1>2</h1>
    </div>
    <div class="col-md-2 col-12 bg-success">
      <h1>3</h1>
    </div>
    <div class="col-md-2 col-6 bg-danger">
      <h1>4</h1>
    </div>
    <div class="col-md-2 col-6 bg-secondary">
      <h1>5</h1>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...