Creating Unique Column Layouts
If you're looking to design a unique layout for six columns, consider positioning them individually based on their ids. By using the id selector in CSS, you can easily position each <div> element according to your specific requirements.
Fixed Layout Solution [Demo]
This approach works well for a fixed six-column layout. However, if you plan to expand it with more columns, additional CSS adjustments will be necessary. For example, you may need to include code like .box:nth-child(8) {left: 150px;} to accommodate new columns.
.container {
position: relative;
}
.box {
width: 50px;
height: 50px;
float: left;
}
.box:nth-child(2n) {
position: absolute;
top: 50px;
}
.box:nth-child(2) {left: 0px;}
.box:nth-child(4) {left: 50px;}
.box:nth-child(6) {left: 100px;}
Enhancing Flexibility [Demo]
By utilizing the transform property as suggested by Itay, you can enhance the flexibility of this solution:
.box:nth-child(4) {transform: translate(100%);}
.box:nth-child(6) {transform: translate(200%);}
While this method improves flexibility, manual adjustment of the top property is still required. Be sure to include vendor prefixes like -webkit- or -ms- where needed.
Scalable Layout Option [Demo]
This scalable solution also utilizes the nth-child(n) selector but employs relative positioning and a clever use of the margin-left property. The streamlined code allows for easy addition of more columns without extra selectors in the CSS – just insert a line in the HTML for seamless integration.
.box {
width: 50px;
height: 50px;
float: left;
position: relative;
}
.box:nth-child(2n) {
top: 50px;
margin-left: -50px;
}
Improved Flexibility Approach [Demo]
For further enhancement, consider utilizing the transform property in conjunction with adjusting the margin-left manually:
.box:nth-child(2n) {
transform: translate(0, 100%);
margin-left: -50px;
}
If dynamically setting the margin-left proves challenging through CSS alone, supplement with JavaScript or jQuery for assistance.
CSS3 Columns Convenience
CSS3 offers a convenient feature to create custom columns effortlessly. Explore more details in this informative article and also refer to Itay's helpful response.