Как предотвратить выброс CSS сетки? - PullRequest
Новая
       19

Как предотвратить выброс CSS сетки?

1 голос
/ 17 июня 2020

У меня проблема - мой макет CSS испорчен из-за заполнения его содержимым.

Если я удалю тег 'p' из HTML (внутри: раздел с философией class = " ") мой макет CSS работает хорошо - боковые поля отображаются с обеих сторон экрана, как и предполагалось. Когда тег 'p' вставляется снова, мои боковые поля уменьшаются или исчезают с экрана. Как я могу предотвратить это?

Как исправить проблему? 

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}


/* wrapper of the content */

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 11.6666667% repeat(12, minmax(0, 4, 47916667%))/*repeat(12, minmax(0, 86px))*/
  11.6666667%;
  column-gap: 2, 08333333%;
  /*40px*/
  grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ." ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ." ". categories categories categories categories categories categories categories categories categories categories categories categories ." ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ." ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ." "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright";
  grid-template-rows: 1235px 858px 1307px 230px 906px 608px 528px 1fr;
}

.navigation {
  background-color: turquoise;
  grid-area: navigation;
}

.philosophy {
  background-color: rgba(230, 45, 45, 0.50);
  grid-area: philosophy;
}

.philosophy_content {
  min-width: 0;
  overflow: auto;
  /*any other value than visible*/
}

.newestWork {
  background-color: rgba(50, 115, 180, 0.50);
  grid-area: newestWork;
}

.categories {
  background-color: rgba(120, 230, 45, 0.50);
  grid-area: categories;
}

.testimonials {
  background-color: turquoise;
  grid-area: testimonials;
}

.followOnInsta {
  background-color: rgba(230, 45, 45, 0.50);
  grid-area: followOnInsta;
}

.footerBrowser {
  background-color: rgba(50, 115, 180, 0.50);
  grid-area: footerBrowser;
}

.copyright {
  background-color: rgba(120, 230, 45, 0.50);
  grid-area: copyright;
}

@media screen and (max-width: 768px) {
  /*.navigation {
                background-color: pink;
            }*/
  .wrapper {
    grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ." ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ." ". categories categories categories categories categories categories categories categories categories categories categories categories ." ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ." ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ." "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
  }
}

@media screen and (max-width: 360px) {
  /*480px*/
  /*.navigation {
                background-color: yellow;
            }*/
  .wrapper {
    grid-template-areas: "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation" "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy" "newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork" "categories categories categories categories categories categories categories categories categories categories categories categories categories categories" "testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials" "followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta" "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser" "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
  }
}
<div class="BG_gradient">
  <div class="wrapper">
    <section class="navigation">
      navigation
    </section>
    <section class="philosophy">
      <div class="philosophy_content">
        <img alt="philosophy img" />
        <h1>Látásmódom</h1>
        <h2>Őszinte képvilág</h2>

        <!--If I remove this <p> tag my css layout works. When the <p> tag is inserted my side margins get smaller or diappear from screen. How can I fix this problem?-->
        <!p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>

        <h2>Tudj meg többet</h2>
      </div>
    </section>
    <section class="newestWork">
      newestWork
    </section>
    <section class="categories">
      categories
    </section>
    <section class="testimonials">
      testimonials
    </section>
    <section class="followOnInsta">
      followOnInsta
    </section>
    <section class="footerBrowser">
      footerBrowser
    </section>
    <section class="copyright">
      copyright
    </section>
  </div>
</div>

1 Ответ

0 голосов
/ 17 июня 2020

Используйте . вместо , в числах с плавающей точкой. Вот так 

grid-template-columns: 
            11.6666667%
            repeat(12, minmax(0, 4.47916667%)) 
            11.6666667%
        ;
        column-gap: 2.08333333%; 


body {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
    }

    /* wrapper of the content */
    .wrapper {
        height: 100vh;
        display: grid;
        grid-template-columns: 
            11.6666667%
            repeat(12, minmax(0, 4.47916667%)) 
            11.6666667%
        ;
        column-gap: 2.08333333%; 

        grid-template-areas:
          "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
          ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
          ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
          ". categories categories categories categories categories categories categories categories categories categories categories categories ."
          ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
          ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
          "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
          "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        ;

        grid-template-rows:
            1235px
            858px
            1307px
            230px
            906px
            608px
            528px
            1fr
        ; 
    }

    .navigation {
        background-color: turquoise;
        grid-area: navigation;
    }

    .philosophy {
        background-color: rgba(230,45,45,0.50);
        grid-area: philosophy;
    }

    .philosophy_content {
        min-width: 0;
        overflow: auto; /*any other value than visible*/
    }

    .newestWork {
        background-color: rgba(50,115,180,0.50);
        grid-area: newestWork;
    }

    .categories {
        background-color: rgba(120,230,45,0.50);
        grid-area: categories;
    }

    .testimonials {
        background-color: turquoise;
        grid-area: testimonials;
    }

    .followOnInsta {
        background-color: rgba(230,45,45,0.50);
        grid-area: followOnInsta;
    }

    .footerBrowser {
        background-color: rgba(50,115,180,0.50);
        grid-area: footerBrowser;
    }

    .copyright {
        background-color: rgba(120,230,45,0.50);
        grid-area: copyright;
    }

    @media screen and (max-width: 768px) {
        /*.navigation {
            background-color: pink;
        }*/

        .wrapper {
            grid-template-areas: 
            "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
            ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
            ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
            ". categories categories categories categories categories categories categories categories categories categories categories categories ."
            ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
            ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
            "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
            "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        }
    }

    @media screen and (max-width: 360px) { /*480px*/
        /*.navigation {
            background-color: yellow;
        }*/

        .wrapper {
            grid-template-areas: 
                "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
                "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy"
                "newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork"
                "categories categories categories categories categories categories categories categories categories categories categories categories categories categories"
                "testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials"
                "followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta"
                "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
                "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
        }
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Photography</title>

  <meta name="keywords" content="portfolio, homepage" />
  <meta name="description" content="portfolio" />
  <meta name="author" content="Burjan Erno" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport">


  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">
</head>

<body>
  <div class="BG_gradient">
    <div class="wrapper">
      <section class="navigation">
        navigation
      </section>
      <section class="philosophy">
        <div class="philosophy_content">
          <img alt="philosophy img" />
          <h1>Látásmódom</h1>
          <h2>Őszinte képvilág</h2>

          <!--If I remove this <p> tag my css layout works. When the <p> tag is inserted my side margins get smaller or diappear from screen. How can I fix this problem?-->
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>

          <h2>Tudj meg többet</h2>
        </div>
      </section>
      <section class="newestWork">
        newestWork
      </section>
      <section class="categories">
        categories
      </section>
      <section class="testimonials">
        testimonials
      </section>
      <section class="followOnInsta">
        followOnInsta
      </section>
      <section class="footerBrowser">
        footerBrowser
      </section>
      <section class="copyright">
        copyright
      </section>
    </div>
  </div>
</body>

</html>
...