0

How can I auto align grid without empty space

#container {
  display: flex;
  height: 700px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb;
  direction: ltr;
  place-content: start;
}

div>div {
  border: 2px solid #8c8c8c;
  width: 50%;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
  width: 40%;
}

.large {
  font-size: 14px;
  height: 50px;
  width: 40%;
}
<div id="container">
  <div class="small" style="height: 150Px">Lorem ipsum ipsum ipsum ipsum ipsum ipsum ipsum</div>
  <div class="small">two</div>
  <div class="large">three</div>
  <div class="large">four 4444</div>
  <div class="large">five</div>
  <div class="large">six</div>
  <div class="large">seven</div>
</div>
Peter B
  • 22,460
  • 5
  • 32
  • 69
AKD
  • 1
  • 1
  • 1
    Welcome to stackoverflow. The code you are adding doesn't help others to help you. You need to add the CSS you are using or the framework you used to achieve what you're trying to achieve – Ahmad Alfy Dec 20 '21 at 13:36
  • What you describe in your picture looks more like two columns than a grid layout. Have you tried that? – A Haworth Dec 20 '21 at 13:41
  • I recommend you **keep** the example image. because now it is unclear and incomplete **again**... – Peter B Dec 20 '21 at 13:48

0 Answers0