代码之家 › 专栏 › 技术社区 › Nicholas Pappas

在网格显示中自动调整列,最大列数

css-grid flexbox css html

Nicholas Pappas · 技术社区 · 6 年前

罐头 display: grid 布局的定义应使列尽可能占用空间(ala: auto-fit ) 但是在达到最大列数时换行,而不单独设置列的样式?

grid-template-columns: repeat(minmax(auto-fit, 12), minmax(0, 1fr));

然而,在我所有的努力中 任何一个 或

在弯曲

.row {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 -12px;
 }
 
 .row > div {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  max-width: 100%;
  min-height: 1px;
  min-width: calc(100%/4);
  padding: 0 12px;
  width: 100%;
}
  
.row p {
  align-items: center;
  background-color: rgba(147, 128, 108, 0.1);
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin: 12px 0 0 0;
  min-height: 36px;
  width: 100%;
}

<div class="row">
  <div><p>1 of 7</p></div>
  <div><p>2 of 7</p></div>
  <div><p>3 of 7</p></div>
  <div><p>4 of 7</p></div>
  <div><p>5 of 7</p></div>
  <div><p>6 of 7</p></div>
  <div><p>7 of 7</p></div>
</div>