How do I square a .rows column (e.g col-sm-4)? I would like to turn each column into widht = height equal columns.
<div class="row">
<div class="col-sm-4">I'm squared</div>
<div class="col-sm-4">I'm too</div>
<div class="col-sm-4">yes, I'm too</div>
</div>
Thanks for any advice.
Bootstrap don't have column height out of the box. The column layout grid actually is flex (See reference).
To make column have same width and height, the option 1 is add your own CSS the same width unit that appears in Bootstrap.
Example:
html, body {
height: 100%; /* for test, expand height to allow column height works. */
}
[class^="col-"] {
outline: 1px solid orange;/* for test */
}
.row {
height: 100%; /* expand height to allow column height works. */
}
.row-sm-4 {
align-self: stretch;
height: 33.33333333%;/* same value as width but not exactly same unit in pixels */
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4 row-sm-4">I'm squared</div>
<div class="col-sm-4 row-sm-4">I'm too</div>
<div class="col-sm-4 row-sm-4">yes, I'm too</div>
</div>This will be use same value of width but since it is in percentage (%), the result will be different on each screen size and maybe not always square. You maybe use pixel on height property but it might not help that much.
The option 2 is use CSS grid.
Example:
.grid-column {
outline: 1px solid orange;/* for test */
}
.container-grid {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.container-grid .grid-column {
aspect-ratio: 1;
width: 100%;
}<div class="container-grid">
<div class="grid-column">I'm squared</div>
<div class="grid-column">I'm too</div>
<div class="grid-column">yes, I'm too</div>
</div>Learn more about CSS grid on css tricks website. The answer about CSS square grid.
