如何防止网格溢出？

Question

我对CSS网格很陌生。我看到了一些类似的问题，但我不加言语。我无法很好地围绕这个概念。如何防止组件从网格溢出？

我上传的图像属于类名为profile-widget-wrapper的部分。我已经定义了grid-row:2/4。但是它溢出了网格定义。我怎样才能解决这个问题？任何帮助表示赞赏。学习CSS网格。谢谢。

.wrapper{  //main wrapper
 display:grid;
 grid-template-columns: 1fr 2fr 2fr;
 grid-template-rows: 100px 300px 100px;
}
.profile-widget-wrapper{    //section that is overflowing
    grid-row:2/4;
 }

<div class="wrapper">
 <section class="profile-widget-wrapper">
    <div class="profile-widget">
      <h5 class="title">PROFILE WIDGET</h5>
      <ul class="widget-optns">
         <li class="active">
           <h5>PROFILE OVERVIEW</h5>
         </li>
         <li class="count">
           <h5>FRIENDS</h5>
           <span class="friend-count">383</span>
          </li>
         <li class="count">
           <h5>GAMES OWNED</h5>
           <span class="games-owned-count">10</span> 
          </li>
         <li>
           <h5>STEAM QUICK LINKS</i></h5>
          </li>
      </ul>
  </div>
  </section>
 </div>

Answer 1

好像您遇到默认的边距和填充。

此外，您正在跨两行（2/4）创建一个网格区域。仅尝试一个（2/3）。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: 100px 300px 100px;
}

.profile-widget-wrapper {
  /* grid-row: 2/4; */ /* spans two rows */
  grid-row: 2 / 3;     /* spans one row */
}

/* remove default style marker, padding and/or margin */
ul {
  padding-left: 0;
  margin-left: 0;
  list-style-type: none;
}

/* horizontal alignment of content */
li {
  display: flex;
  align-items: baseline; /* to work around h5 margins */
  justify-content: space-between;
}

<div class="wrapper">
  <section class="profile-widget-wrapper">
    <div class="profile-widget">
      <h5 class="title">PROFILE WIDGET</h5>
      <ul class="widget-optns">
        <li class="active">
          <h5>PROFILE OVERVIEW</h5>
        </li>
        <li class="count">
          <h5>FRIENDS</h5>
          <span class="friend-count">383</span>
        </li>
        <li class="count">
          <h5>GAMES OWNED</h5>
          <span class="games-owned-count">10</span>
        </li>
        <li>
          <h5>STEAM QUICK LINKS</h5>
        </li>
      </ul>
    </div>
  </section>
</div>