CSS: remove empty Space between boxes

Question

I have a flex layout (not sure whether this is right) and boxes with different size of content. It is possible for me to define the width but the height will be variable. If I have lot of boxes of unequal size than boxes with less content will have lot of empty space. It's important for me to fill the space. Any idea how I can get rid of empty space?

See example: https://jsbin.com/kunekef/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .part {
      width: 40%;
      xheight: 200px;
    }
  </style>
</head>
<body>

  <div class="d-flex flex-wrap" style="height:100%; width:100%;">
    <div class="part p-3">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="part p-3">2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. t ever since the 1500s, when an unknown printer took a o make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">3 dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">4 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>

flex cannot do this, but column CSS does : https://jsbin.com/yeqezajuho/1/edit?html,output filling col after col. grid might if you tell each element where to stands but it requires to know how big they are... — G-Cyrillus, Nov 23 '19 at 22:53
You should not define a fixed width like that. Try the `fr` unit — Thanh Trung, Nov 23 '19 at 22:54

score 1 · Accepted Answer · answered Nov 23 '19 at 22:57

Something like this?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .wrapper {
       column-count: 3;
      column-gap: 1.25rem;
    }
    .part {
       break-inside: avoid-column;
      position: relative;
      display: inline-block;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
    }
  </style>
</head>
<body>
  
  <div class="wrapper" style="height:100%; width:100%;">
    <div class="part p-3">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="part p-3">2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. t ever since the 1500s, when an unknown printer took a o make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">3 dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">4 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <div class="part p-3">5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>

score 0 · Answer 2 · answered Nov 23 '19 at 22:57

0

finally found the magic word for that: "Masonry". Here is thread: CSS float empty spaces

and here another approach: https://w3bits.com/css-masonry/

answered Nov 23 '19 at 22:57

robie2011

3,678
4
21
20

CSS: remove empty Space between boxes

2 Answers2

Linked