Indeed, Flexbox can be utilized in this scenario and will likely fulfill the requirements at hand. It may involve some unconventional methods as CSS column rules need to be disregarded. While there is a degree of consistency, adjusting values may be necessary when adding more rows or columns. To maintain a set number of columns per row, setting a fixed or percentage height for the wrapper is essential. Subsequently, designate the wrapper container as a flex container using the display: flex rule and create multiple columns through either flex-direction: column and flex-wrap: wrap, or the shorthand flex-flow: column wrap.
In order to ensure each column contains a specific number of items, apply the flex-basis rule set at the desired percentage for the column to occupy. For instance, a column with 3 items would have flex-basis: 33.33%. Since you mentioned a layout with several rows of 3 items followed by a few rows of 2 items, utilizing the nth-child or nth-of-type selector to adjust the flex-basis to 50% from the 10th element onwards is recommended. Additionally, specify the width percentage for individual elements on the page (e.g., 4 rows = 25%) for uniform sizing.
However, centering text within a flexbox poses a challenge, requiring the establishment of elements as flex containers using display: flex or inline-flex, alongside setting flex-direction, text-align, and justify-content properties to center.
justify-content: center;
flex-direction: column;
text-align: center
http://jsfiddle.net/hxcnoxx9/10/
This CSS approach should effectively address the specified requirements.
.wrap {
height: 180px;
background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%);
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.thing {
background: rgba(255, 255, 255, .2);
color: #fff;
width: 25%;
flex-basis: 33.33%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
display: inline-flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.thing:nth-child(1n+10) {
flex-basis: 50%;
}