Set width to dynamic column using only CSS

We can set width to dynamically generated columns based on its count using only CSS3 and without using any js framework or libraries

by pphheerroonn

HTML

<div class="container1">
    <div class="column">Column 1</div>
</div>
<div class="container2">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
</div>
<div class="container3">
    <div class="column">Column 1</div>
    <div class="column" style="background:red;">Column 2</div>
    <div class="column">Column 3</div>
</div>

CSS

.container1, .container2, .container3 {
  float: left;
  width: 100%;
}
.container1 .column, .container2 .column, .container3 .column {
  float: left;
}
.container1 .column {
  background: #ff0000;
}
.container2 .column {
  background: #ffff00;
}
.container3 .column {
  background: #ff00ff;
}
.container1 .column:first-child:nth-last-child(1) {
  width: 100%;
}
.container2 .column:first-child:nth-last-child(2), .container2 .column:first-child:nth-last-child(2) ~ .column {
  width: 50%;
}
.container3 .column:first-child:nth-last-child(3), .container3 .column:first-child:nth-last-child(3) ~ .column {
  width: 33.33%;
}