停止 CSS 网格列溢出

Question

我尝试用最大高度、最大宽度来阻止列溢出，但似乎不起作用。

我用 CSS 网格制作了三列。一个用于导航部分，一个用于左栏，一个用于右栏。如屏幕截图所示，左栏部分不断溢出导航部分和右栏部分。

我想要达到的目标：

会发生什么：

@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4a6163;
  font-family: "Asap";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.25fr (1fr)[2];
      grid-template-columns: 0.25fr repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: 100%;
  max-width: 100%;
}

.nav_section {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 1 / 2;
  border: 3px yellow solid;
}

.left_column {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello, I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>

Answer 1

为避免溢出，您可以对 h1 使用规则 white-space: nowrap;。但是，这也将避免在“Hello”之后换行。

所以我还建议在 Hello, 之后添加一个 <br /> 以明确打破该行。

这应该可以解决您的 line-break 问题，但我注意到您也将文本旋转了 90deg，这可能会弄乱单元格内的标题。

所以我建议添加规则writing-mode: tb-rl（link）让文字竖写，然后旋转180度而不是90度（所以变成bottom-up而不是top-down)

这是包含建议更改的代码段

@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4a6163;
  font-family: "Asap";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.25fr (1fr)[2];
      grid-template-columns: 0.25fr repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: 100%;
  max-width: 100%;
}

.nav_section {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 1 / 2;
  border: 3px yellow solid;
}

.left_column {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  /* Updated the following 3 lines */
  white-space: nowrap;
  writing-mode: tb-rl;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello,<br/>I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>

停止 CSS 网格列溢出

Stopping CSS Grid column from overflowing

html

css

css-grid