How can I make this layout align like it should? - html

Question

I'm trying to learn and practice flexbox by creating my own layouts. I'm not entirely sure why bottom row's col-1-of-2 won't align with the right col-1-of-2 in second row. Same with col-1-of-4.
Is grid-box better for this because you have more control of the column gap? I tried making the parent margin 5px and the children padding 5px and it was close but still not 100% aligned. I'm assuming we have to take the screen size into consideration as well?
.row {
display: flex;
}
.col {
display: flex;
flex-grow: 1;
border: 1px solid purple;
margin: 1rem;
}
.col-1-of-1 {
width: 100%;
justify-content: center;
background: lightblue;
}
.col-1-of-2 {
width: 50%;
justify-content: center;
background: orange;
}
.col-1-of-3 {
width: 33%;
justify-content: center;
background: lightgreen;
}
.col-1-of-4 {
width: 25%;
justify-content: center;
background: lightcoral;
}
<div class="row">
<div class="col col-1-of-1">
<p>col-1-of-1</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>

Answer 1

Is grid-box better for this because you have more control of the column gap?
You're getting close to understanding the nature of the problem in this statement. The problem is that you're taking a layout engine that was built with the goal of allowing elements to grow and shrink their size and space between them in order to get an organic fit, and expecting it to behave like a rigid, grid-like system.
Specifically, the issue arises when you add the margin to .col elements. For any given row, you are trying to fit the contents into 100% width, but the contents widths add up to 100% plus whatever margin exists for the number of elements you've included.
For instance-- the top row will be 100% plus 2rem (margin on either side). The next row is two elements of 50% width, which adds to 100%, plus the 4rem tacked on for the 1rem margins on either sides of the two elements.
flex takes care of this for you-- it massages the sizes and gaps in order to make everything fit nice and cleanly in that 100% width space. However, things get sticky when you start mixing the .col-1-of-<num> types and expecting them to line up nicely-- flex is doing its work to make sure they fit, which is coming at the cost of having them align.
That said, what you want is possible with flex. The solution below simply uses a calc() to make sure that the margins are considered when setting the width of the element-- instead of .col-1-of-1 being 100%, it is calc(100% - 2em), .col-1-of-2 becomes calc(50% - 2em), and so on.
There may be other ways to approach this using flex that would also work, possibly by playing around with the flex property, or the justify-content property; or you could check out grid. Good luck!
.row {
display: flex;
}
.col {
display: flex;
flex-grow: 1;
border: 1px solid purple;
margin: 1rem;
}
.col-1-of-1 {
width: calc(100% - 2rem);
justify-content: center;
background: lightblue;
}
.col-1-of-2 {
width: calc(50% - 2rem);
justify-content: center;
background: orange;
}
.col-1-of-3 {
width: calc(33% - 2rem);
justify-content: center;
background: lightgreen;
}
.col-1-of-4 {
width: calc(25% - 2rem);
justify-content: center;
background: lightcoral;
}
<div class="row">
<div class="col col-1-of-1">
<p>col-1-of-1</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>