CSS网格增长以适应内容

时间:2018-11-19 02:03:02

标签: css css3 css-grid

我一直试图把我的头缠在CSS网格上。在此示例中,为什么外部网格没有增长到内部网格的大小?如何解决此布局?

.scroll {
  width: 200px;
  overflow: auto;
}

.wrapper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
  margin: 1rem;
}

.grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1em;
}
<div class="scroll">
  <div class="wrapper">
    <div class="grid">
      <p>Grid:</p>
      <div class="grid">
        <p>text here</p>
        <p>verylongtextherewithoutanybreakingoptions</p>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:4)

在您的示例中,您有两个网格和另外两个包装器。由于将两个栅格都制成inline-grid,所以两个栅格都被扩展为相同的大小,但是在.wrapper中应用box-shadow的情况并非如此。

制作.wrapper inline-block,它将修复布局。

.scroll {
  width: 200px;
  overflow: auto;
}

.wrapper {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 2px;
  margin: 1rem;
  display:inline-block;
}

.grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-column-gap: 1em;
}
<div class="scroll">
  <div class="wrapper">
    <div class="grid">
      <p>Grid:</p>
      <div class="grid">
        <p>text here</p>
        <p>verylongtextherewithoutanybreakingoptions</p>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分:1)

外部.grid与内部.grid始终长大。在这里固定的是.scroll

的宽度