Arrange number of divs / columns per row

Question

Arrange number of divs / columns per row

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

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

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

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

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

On the cell phone, stay on top of each other, because of 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? Is it possible?

Editing, I did it with the following CSS:

-webkit-flex: 1 1 50%;
flex: 1 1 50%;
min-width: 1px;

html css

asked by anonymous 22.05.2017 / 20:42

2 answers

2

Ideally, you should know how you have 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 you put each of your divs half the width of the screen and it would be something like that. (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 do not know Media Queries, it would be the way in CSS, you define for which screens you would like your rules to apply by putting your rules in this way (Example):

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

22.05.2017 / 21:22

Extracting Window Values and Schedules in a Network Dump regex to replace the $ _POST ['field'] string with $ this-input-post ('field') of codeigniter

score 2 · Accepted Answer

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>

link