CODEWITHSUNDEEP
cssgrid
Michael
Michael

Reputation: 16122

Grid columns without float

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

Upvotes: 0

Views: 605

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 2

Related Questions