没有浮动的网格列

时间:2017-01-21 20:16:05

标签: css grid

我试图在同一行中放置七个相同大小的列:

.seven-cols .col-hard-1 {
  width: 14.28%;
  *width: 14.28%;
  float: left;
}

然而,float:left搞砸了页面上的所有下一个块。有没有办法在不使用float的情况下制作此网格?

Codepen

1 个答案:

答案 0 :(得分:2)

在容器上使用display: flex;,在项目上使用flex-grow: 1;flex-basis: 0;,以使它们占用相同数量的可用空间。



.seven-cols {
  display: flex;
}
.seven-cols .col-hard-1 {
  flex-grow: 1;
  flex-basis: 0;
}

<div class="seven-cols">
  <div class="col-hard-1">
    one
  </div>

  <div class="col-hard-1">
    two
  </div>

  <div class="col-hard-1">
    three
  </div>

  <div class="col-hard-1">
    four
  </div>

  <div class="col-hard-1">
    five
  </div>
  <div class="col-hard-1">
    six
  </div>
  <div class="col-hard-1">
    seven
  </div>
</div>
&#13;
&#13;
&#13;