时间戳

首页 > 解决方案 > 如何防止网格溢出？

html - 如何防止网格溢出？

问题描述

我对 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>

标签： htmlcsscss-grid

解决方案

看起来您遇到了默认边距和填充。

此外，您正在跨两行 ( 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>

推荐阅读