2

Okay so I'm using an example I saw on W3 Schools. Here is the exact problem and I was able to replicate my problem on their website as well. https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp

My problem is that I have this large white space gap depending on the size of my grid blocks. When the grid blocks are all identical size then there is no large gap.

If the grid blocks that are on the right side are larger then there is no gap.

There is only a gap when the grid block on the left is larger than its right neighbor.

So my question is what do I do to get rid of this gap?

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}


/* Center website */

.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}


/* Add padding BETWEEN each column */

.row,
.row>.column {
  padding: 8px;
}


/* Create four equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
}


/* Clear floats after rows */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Content */

.content {
  background-color: white;
  padding: 10px;
}


/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
<!-- MAIN (Center website) -->
<div class="main">

  <h1>MYLOGO.COM</h1>
  <hr>

  <h2>PORTFOLIO</h2>

  <!-- Portfolio Gallery Grid -->
  <div class="row">
    <div class="column">
      <div class="content">
        <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <h3>My Work</h3>
        <p>Less space used here</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
      </div>
    </div>
    <div class="column">
      <div class="content">
        <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
        <h3>My Work</h3>
        <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
      </div>
    </div>
    <!-- END GRID -->
  </div>

  <div class="content">
    <img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
    <h3>Some Other Work</h3>
    <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
    <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
  </div>

  <!-- END MAIN -->
</div>

3

1 Answer 1

1

It's my understanding that your design is currently breaking the document flow, using the css float: left option.

If you look closely, Your portfolio items are actually in the correct order based on your code, the order is 1. Mountains, 2. Lights, 3. Nature, 4. Mountains. the DOM has been rendered to fill the space after the "Lights" with "Nature". This is because the document is rendered Left to Right, Top to Bottom, with that in mind, "Nature" occupies the entire space causing a gap when "Mountains" is rendered.

Instead of using floats, I would recommend using CSS Grids instead.

Check the following code out:

#grid { 
    display:grid;
    grid-template-column: 1fr 1fr;
    column-gap: 30px;
}

.elem {
    margin-bottom: 25px;
}
<div id="grid">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.