Flex grid not aligning - html

Question

I have a grid I have built out of flex boxes. Some of the grid is made of squares, with two rectangles. I can't seem to get the boxes to align correctly, using flexbox with flex-grow, or manually setting the box heights. The goal is to have them all line up with equal margins between the entire grid. Here is the grid code:
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:800px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS
For easy viewing, here is a codepen I've made: https://codepen.io/bsquared/pen/zdPqPJ

Answer 1

As commented, if you involved <a> in your flex layout and also to draw the background, you can achieve the visual you look for.
a {
/*with no fix height so it can be spread evenly if needed*/
background: blue;
/* draw bg here it will include children area and further if needed to even the visual */
margin: 10px;
/* set margins here */
color: white;
}
/* flex layout and sizing */
.flex,
a {
display: flex;
}
.column,
a {
flex-direction: column;
flex: 1;/* make fill entire space left if any */
}
.box {
height: 400px;
}
.tall {
height: 800px;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');"><!-- background-image is to be send & set to the parent A -->
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
If you want to keep heights, then you need to mind the amounts of margins all together with eights of elements in each column :
example
.project-grid { height: 1400px; padding: 80px 20px; }
.project-grid .column { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall { height:824px; }
.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex { display:flex;}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" >
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS

Answer 2

The p tags, which has margins top and bottom by defaults, are pushing the boxes up. You have to use overflow: auto; on the parent div to prevent it from happening.
.project-grid .column .box {
// ...
overflow: auto;
}
Full working code:
.project-grid {
height: 1400px;
padding: 80px 20px;
}
.project-grid .column {
width: 33.33%;
margin-left: 10px;
flex-direction: column;
margin-top: -10px;
}
.project-grid .column:first-child {
margin-left: 0;
}
.project-grid .column .box {
margin-top: 10px;
background-color: blue;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
overflow: auto;
}
.project-grid .column .box.tall {
height: 800px;
}
.project-grid .column a .box>p {
font-family: $lato;
color: $white;
font-size: 24px;
}
.flex {
display: flex;
}
<div class="project-grid flex">
<div class="flex column">
<a href="/hospitality">
<div class="box" style="background-image: url('');" <a href="/projects">
<p>Hospitality</p>
</div>
</a>
<a href="/rennovation-repurpose">
<div class="box tall" style="background-image: url('');">
<p>Rennovation/ Repurpose</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/automotive">
<div class="box" style="background-image: url('');">
<p>Automotive</p>
</div>
</a>
<a href="/serenbe">
<div class="box" style="background-image: url('');">
<p>Serenbe</p>
</div>
</a>
<a href="/retail-office">
<div class="box" style="background-image: url('') ;">
<p>Retail/ Office</p>
</div>
</a>
</div>
<div class="flex column">
<a href="/multi-family-mixed-use">
<div class="box tall" style="background-image: url('');">
<p>Multi-Family/ Mixed Use</p>
</div>
</a>
<a href="/education-places-of-worship">
<div class="box" style="background-image: url('');">
<p>Education/ Places of Worship</p>
</div>
</a>
</div>
</div>
CSS