html - Flex grid not aligning -


i have grid have built out of flex boxes. of grid made of squares, 2 rectangles. can't seem boxes align correctly, using flexbox flex-grow, or manually setting box heights. goal have them line equal margins between entire grid. here 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 .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 codepen i've made: https://codepen.io/bsquared/pen/zdpqpj

as commented, if involved <a> in flex layout , draw background, can achieve visual for. 

a {    /*with no fix height can spread evenly if needed*/    background: blue;    /* draw bg here include children area , further if needed visual */    margin: 10px;    /* set margins here */    color: white;  }      /* flex layout , sizing */    .flex,  {    display: flex;  }    .column,  {    flex-direction: column;    flex: 1;/* make fill entire space left if */  }    .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 send & set parent -->          <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 want keep heights, need mind amounts of margins 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 .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


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more