Grid columns without float

Question

I'm trying to place seven columns of the same size in one row:

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

However, float:left screws up the all the next blocks on the page. Is there a way to make this grid without using float?

Codepen

Michael Coker · Accepted Answer · 2017-01-21 20:20:34Z

2

Use display: flex; on the container and flex-grow: 1; and flex-basis: 0; on the items to make them all take up the same amount of available space.

.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>

answered Jan 21, 2017 at 20:20

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Over a year ago

That's a great solution. I totally forgot about flex. Thanks!

Collectives™ on Stack Overflow

Grid columns without float

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related