如何防止 CSS 电网井喷？

Question

我有一个问题 - 我的 CSS 布局被内容填充弄乱了。

如果我从 HTML 中删除 'p' 标签（内部：带有 class="philosophy" 的部分），我的 CSS 布局效果很好 - side边距按预期出现在屏幕的两侧。当再次插入 '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>

Answer 1

在带浮点的数字中使用.代替,。像这样

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>

如何防止 CSS 电网井喷？

How to prevent a CSS Grid blowout?

css

overflow

css-grid