grid-auto-flow：密集使元素宽度非常小

Question

嗨我正在玩css网格，特别是网格自动流：密集属性，一切似乎工作正常，唯一的问题是，当你的浏览器真的很小时，一些行崩溃到很小宽度。知道为什么会这样吗？例如，这里长紫色的div就消失了。

＆＃13;

＆＃13;

body {
  background: mediumaquamarine;
}

.u-ptb40 {
  padding: 40px 0;
}

.container {
  max-width:960px;
  margin: 0 auto;

  /* grid */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}

.tile {
  border-radius: 20px;
}

.work__wrap {
  grid-template-columns: repeat(auto-fill, minmax(calc(860px / 6), 1fr));
  grid-gap: 20px;
  grid-auto-rows: minmax(calc(860px / 6), auto);
  grid-auto-flow: dense;
}

.two-by-two {
  background: pink;
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.one-by-three {
  background: mediumslateblue;
  grid-row-end: span 3;
}

.three-by-two {
  background: lightgoldenrodyellow;
  grid-column-end: span 3;
  grid-row-end: span 2;
}

.one-by-one {
  background: salmon;
}

.one-by-two {
  background: lightgreen;
  grid-row-end: span 2;
}

.two-by-one {
  background: lightskyblue;
  grid-column-end: span 2;
}

＆＃13;

<div class="">
  <div class="container work__wrap u-ptb40">
    <div class="tile two-by-two">
    </div>
    <div class="tile one-by-three">
    </div>
    <div class="tile three-by-two">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile one-by-two">
    </div>
    <div class="tile two-by-two">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile three-by-two">
    </div>
    <div class="tile one-by-one">
    </div>
    <div class="tile two-by-one">
    </div>
    <div class="tile two-by-one">
    </div>
    <div class="tile one-by-one">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

另外我想知道是否有办法让过渡更加流畅，有点像pinterest中的那种，当你看到瓷砖重新排列时。感谢。

修改

这是我不喜欢的，1fr宽的colums变小。

Answer 1

问题不是由grid-auto-flow: dense引起的。

问题是网格项没有固有宽度的结果，所以它只是在较小的屏幕上折叠。

你有这个：

.one-by-three {
   grid-row-end: span 3;
   background: mediumslateblue;
}

相反，试试这个：

.one-by-three {
   grid-row-end: span 3;   
   grid-column-end: span 2;  /* new, for example */
   background: mediumslateblue;
}

或，只需添加内容。

body {
  background: mediumaquamarine;
}

.u-ptb40 {
  padding: 40px 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  /* grid */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}

.tile {
  border-radius: 20px;
}

.work__wrap {
  grid-template-columns: repeat(auto-fill, minmax(calc(860px / 6), 1fr));
  grid-gap: 20px;
  grid-auto-rows: minmax(calc(860px / 6), auto);
  grid-auto-flow: dense;
}

.two-by-two {
  background: pink;
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.one-by-three {
  grid-column-end: span 3; /* new */
  grid-row-end: span 3;
  background: mediumslateblue;
  
}

.three-by-two {
  background: lightgoldenrodyellow;
  grid-column-end: span 3;
  grid-row-end: span 2;
}

.one-by-one {
  background: salmon;
}

.one-by-two {
  background: lightgreen;
  grid-row-end: span 2;
}

.two-by-one {
  background: lightskyblue;
  grid-column-end: span 2;
}

<div class="">
  <div class="container work__wrap u-ptb40">
    <div class="tile two-by-two">test</div>
    <div class="tile one-by-three">test</div>
    <div class="tile three-by-two">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile one-by-two">test</div>
    <div class="tile two-by-two">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile three-by-two">test</div>
    <div class="tile one-by-one">test</div>
    <div class="tile two-by-one">test</div>
    <div class="tile two-by-one">test</div>
    <div class="tile one-by-one">test</div>
  </div>
</div>