Organize Divs into blocks over each other?

Asked

Viewed 1,075 times

3

I would like to organize my Ivs in column form, but not side by side, but rather on top of each other. Usually when using float: left or display: inline-block the elements are placed side by side up to the size limit, and then a new line is created, example:

|DIV 1|   |DIV 2|   |DIV 3|

|DIV 4|   |DIV 5|   |DIV 6|

|DIV 6|   |DIV 7|   |DIV 8|

But I’d like them to stay that way:

|DIV 1|   |DIV 4|   |DIV 7|

|DIV 2|   |DIV 5|   |DIV 8|

|DIV 3|   |DIV 6|   |DIV 9|

I don’t want to have to create different columns and put each div there, I want them to organize themselves this way, as I can do?

css float flexbox display

  • always 3 columns?

  • or more, it depends on the amount of elements that will be created dynamically, but for the purpose of response if necessary, yes it can assume that there are 3

3 answers

1

If you know the height value of the cantainer, you can do so: 

body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 60px;
}
<body>
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
  <div>DIV 7</div>
  <div>DIV 8</div>
  <div>DIV 9</div>
</body>

to increase and decrease the number of columns just change the height

1


You can use the property column-count and define how many columns you want, in the example I put 3 columns. The property always tries to optimize the distribution in an automated way between all three columns, regardless of the amount of divs that you have inside.

Here’s the Mozilla documentation for this property https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

See the example to better understand:

.colunas {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
<div class="colunas">
    <div>DIV 1</div>
    <div>DIV 2</div>
    <div>DIV 3</div>
    <div>DIV 4</div>
    <div>DIV 5</div>
    <div>DIV 6</div>
    <div>DIV 7</div>
    <div>DIV 8</div>
    <div>DIV 9</div>
</div>

TIP:

It’s even super easy to make the columns responsive, because you can change this number depending on the width of the screen. In the model below when the screen is smaller than 768px passes from 3 to 2 columns

.colunas {
    -webkit-column-count: 3; /
    -moz-column-count: 3; 
    column-count: 3;
}

@media screen and (max-width: 768px) {
    .colunas {
        -webkit-column-count: 2; 
        -moz-column-count: 2; 
        column-count: 2;
    }
}

OBS:

  • With display:flex you need to define a height pro container
  • With column-count vc do not need to set parent element height or Rows number
  • With display:grid you need to define a number of Automatic Rows, as well as width, may be an option to consider

  • How to deal with problems like this, where part of the element was sent to the next column? https://imgur.com/a/l2Nh6cA ... By the way I really liked the solution, it was worth

  • 1

    Looking at the example I did to fix this you have to in the Ivs that are inside the parent div with the class. columns you have to place the property break-inside: avoid-column; kind of: .colunas > div { break-inside: avoid-column; } This should prevent the content from breaking between one column and another.

-2

What is happening friend, is that you are not using the proper html structure to do this, float is not a good idea, use the display: inline-block that is better.

To get this layout, you need to structure your html for this, follow an example of how to do

.wrapper {
  display:block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.wrapper .column {
  display: inline-block;
  width: 32%;
}

.column div {
  width: 90%;
  background: #ccc;
  text-align: center;
  margin: 10%;
}
<div class="wrapper">
  <div class="column">
    <div>
      1
    </div>
    <div>
      2
    </div>
    <div>
      3
    </div>
  </div>
  <div class="column">
    <div>
      4
    </div>
    <div>
      5
    </div>
    <div>
      6
    </div>
  </div>
  <div class="column">
    <div>
      7
    </div>
    <div>
      8
    </div>
    <div>
      9
    </div>
  </div>
</div>

  • As I said in the question, I would not like to have to manually create each new column with their respective Divs

Browser other questions tagged css float flexbox display

You are not signed in. Login or sign up in order to post.