添加文本时停止 CSS 网格拉伸？

Question

我对 html & css 很陌生。

我创建了一个包含 8 行和 2 列的网格，我试图在第 5 到第 8 行/第 1 列中写一个段落，但每次我这样做时它都会拉伸该列并推入右侧，使其越来越小。文本仅在整个区域的大约 95% 处开始换行（因此左栏基本上几乎是整个页面）。

我试过使用 overflow-wrap / word-break / word-wrap / min-width 等等。在网上查了一下，我似乎仍然无法让它保持原样！

这是完整的代码，其中包含一些用于扩展该列的文本。感谢您的帮助！

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-colums: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>

Answer 1

您的问题只是一个错字： grid-template-colums 应该是 grid-template-columns

一些对未来有帮助的提示：

编辑器中的拼写检查器可以立即发现一些错误；对 CSS.
VS Code 会警告您有关未知的属性。
Firefox，如果您单击开发工具中的 CSS 图标，将会显示错误：

body {
  background-color: black;
}

.mainzone {
  background-color: white;
  width: 960px;
  display: grid;
  grid-template-areas: "bannerpic bannerpic"
                       "bannerpic bannerpic"
                       "title title"
                       "syn act"
                       "rev names"
                       "rev avs"
                       "rev crit"
                       "rev stars";
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 20px;
}

.bannerpic {
  grid-area: bannerpic;
  /* border: 1px black solid; */
  border-radius: 20px 20px 0px 0px;
  background-image: url("./IMG/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  width: 960px;
  margin: auto;
}

.maintitle {
  grid-area: title;
  border: 1px black solid;
}

.logo-new {
  grid-area: title;
  background-image: url("./IMG/logo1black.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: auto;
  margin: 10px 10px 0px 0px;
  background-position: right;
}

.subsyn {
  grid-area: syn;
  border: 1px black solid;
}

.subact {
  grid-area: act;
  border: 1px black solid;
}

.subavs {
  grid-area: avs;
  border: 1px black solid;

}

.review {
  grid-area: rev;
  border: 1px black solid;
}
.para {
  
}

.actors {
  grid-area: names;
  border: 1px black solid;
}

.critique {
  grid-area: crit;
  border: 1px black solid;
}

.stars {
  grid-area: stars;
  border: 1px black solid;
  background-image: url(./IMG/stars1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title></title>
</head>

<body>
  <div class="mainzone">
    <div class="bannerpic"></div>
    <div class="maintitle"></div>
    <div class="logo-new"></div>
    <div class="logo-old"></div>
    <div class="subsyn"></div>
    <div class="subact"></div>
    <div class="subavs"></div>
    <div class="review">
      <p class="para">this is the paragraph stretching it, i'll add some random characters. dsds sdsds dsd sd sd sdsd sd sd sds  dsd sd sdsdsd  sdsds ds dsd sd sd sd sd s<p>
    </div>
    <div class="actors"></div>
    <div class="critique"></div>
    <div class="stars"></div>

  </div>  <!-- mainzone -->

</body>
</html>

添加文本时停止 CSS 网格拉伸？

Stop CSS Grid stretching when adding text?

css

text

word-wrap

css-grid