I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell.
Below is my current progress:
body {
text-align: center;
}
.item {
padding: 20px;
margin-bottom: 10px;
text-align: left;
display: block;
font-size: 0.75em;
}
.row {
margin: 10px;
display: block;
margin-bottom: 25px;
box-sizing: border-box;
border: solid blue 1px;
height: 100px;
}
.row div {
margin: 0px;
padding: 0px;
box-sizing: border-box;
float: left;
height: 100%;
width: 16.667%
}
.row a {
text-align: center;
margin: 5px;
padding: 20px;
}
.row a * {
display: block;
}
.row img {
width: 100%;
display: inline-block;
}<div class="row">
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Applied Panel - Base Left Side</span>
</a>
</div>
<!-- Add more items here -->
</div>http://jsfiddle.net/aj8py9gu/4/
The criteria for this layout were inspired by a similar interface created in WPF. While it was achieved with just three lines of XAML, replicating it in HTML5 has proven challenging. The row div's are given a fixed height to prevent them from collapsing to zero height and causing overlapping cells. However, I seek a solution without fixed dimensions.
While proficient in HTML/CSS/JavaScript, I welcome fresh perspectives on this issue. If possible, I prefer a CSS-based approach over JavaScript for handling size adjustments.