1

I have an app that displays different divs and I want to style it so that as the size of the window changes, columns are added and taken away and the content is dynamically arranged within the columns. I'm using media query to add a column to the main container every 400px and the width of every div is 400px. However.when there are two columns and three divs the overflow ends up in the right most column. How do i make my columns fill from left to right?

@media (max-width: 1199px) and (min-width: 800px) {
  .main-container {
    column-count: 2;
    padding: 15px;
    margin: 15px;
  }

  .item {
    border: solid black 1px;
    width: 400px;
    -webkit-column-break-inside: avoid;
  }
}

<section class="main-container">

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

</section>
Brittany Farrell
  • 57
  • 6
  • sorry, I forgot to add a line to css that stopped the div from being split between two columns and couldn't figure out how to do what you did before. But i do appreciate you editing it for me and your welcome to edit my questios anytime. – Brittany Farrell Dec 13 '20 at 01:43

2 Answers2

0

You can use display grid to achieve that, using auto-fill to add new columns when the window have enough size and defining the size inside the minmax function.

.main-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 400px));
}
Filipe
  • 537
  • 3
  • 10
0

You can use grid. And now whenever there is going to be free 400px space it will add a new column.

* {
  box-sizing: border-box;
}
.main-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-gap: /* Here you can add whatever spacing between items you want */ ;
  padding: 15px;
  margin: 15px;
}
.main-container > .item {
  border: solid black 1px;
  width: 400px;
}
<section class="main-container">
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
</section>
Kristers Dzintars
  • 178
  • 1
  • 10