CODEWITHSUNDEEP
htmlcssflexbox
bsquared
bsquared

Reputation: 137

Flex grid not aligning

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

Upvotes: 0

Views: 212

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106048

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

Upvotes: 1

Nelson Yeung
Nelson Yeung

Reputation: 3402

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

Upvotes: 0

Related Questions