Arrange amount of Divs/columns per row

Asked

Viewed 1,012 times

2

I have the responsive site, and I have a list of products. On the desktop it is OK, it is for example:

|PRODUTO 1|   |PRODUTO 2|   |PRODUTO 3|

|PRODUTO 4|   |PRODUTO 5|   |PRODUTO 6|

|PRODUTO 6|   |PRODUTO 7|   |PRODUTO 8|

On the phone, is on top of each other, It is the size of the screen:

|PRODUTO 1|

|PRODUTO 2|

|PRODUTO 3|

|PRODUTO 4| 

|PRODUTO 5|

I wanted the cell phone to be organized 2-in-2:

|PRODUTO 1|   |PRODUTO 2|

|PRODUTO 3|   |PRODUTO 4|

|PRODUTO 5|   |PRODUTO 6|

How do I organize this with css? It’s possible?

Editing, I got it with the following CSS:

-webkit-flex: 1 1 50%;
flex: 1 1 50%;
min-width: 1px;
html css
  • 2

    Are you using any columns-based CSS framework? Type, Bootstrap and such

  • No, @jbueno, no framework.

2 answers

2


use media query

.box{
    width: 25%;
    height: 150px;
    background: black;
    float: left;
}


@media(max-width: 600px){
    .box{
        width: 50%;
    }
}
<div class="boxs">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

https://jsbin.com/gezokoh/edit?html,css,output

2

The ideal would be to know how you set up your CSS, but for it to become a column, I imagine you should be using float: left.

From this, the ideal would be for you to put each of your Divs half the width of the screen and would be something like this. (Logically this within Media Queries specific to the desired screen size):

body {
  margin: 0;
}

.product {
  float: left;
  width: 46%;
  height: 50px;
  margin: 1%;
  line-height: 50px;
  text-align: center;
}

.product:nth-child(1) {
  background: #111;
  color: #AAA;
}

.product:nth-child(2) {
  background: #222;
  color: #999;
}

.product:nth-child(3) {
  background: #333;
  color: #888;
}

.product:nth-child(4) {
  background: #444;
  color: #777;
}

.product:nth-child(5) {
  background: #555;
  color: #666;
}

.product:nth-child(6) {
  background: #666;
  color: #555;
}

.product:nth-child(7) {
  background: #777;
  color: #444;
}

.product:nth-child(8) {
  background: #888;
  color: #333;
}

.product:nth-child(9) {
  background: #999;
  color: #222;
}

.product:nth-child(10) {
  background: #AAA;
  color: #111;
}
<div id="container">
  <div class="product">Produto 1</div>
  <div class="product">Produto 2</div>
  <div class="product">Produto 3</div>
  <div class="product">Produto 4</div>
  <div class="product">Produto 5</div>
  <div class="product">Produto 6</div>
  <div class="product">Produto 7</div>
  <div class="product">Produto 8</div>
  <div class="product">Produto 9</div>
  <div class="product">Produto 10</div>
</div>

EDIT

If you don’t know Media Queries, it would be the way, in CSS, you define to which screens you would like your rules to apply by putting your rules this way (Example):

@media screen and (max-width: 480px) {
    /* suas regras aqui */
}

Browser other questions tagged html css

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