How can I stylize a grid of products that are on different lists with pure CSS?

Question

How can I stylize a grid of products that are on different lists with pure CSS?

Navigation

#1 by (0 votes)

0

I need to stylize a product grid for a store, the grid should be responsive, and as the screen shrinks, the number of products (fixed size) should decrease (first 5 products, then 4, then 3, etc). I'm trying to do with CSS grid, or failing to try it with flexbox. But my problem is that the products (whose model comes from a platform that I can not change, just stylize) are grouped in different html lists, what I have to get is a single grid with all the products (as if everything were in the same list) and that is adapted to the width of the screen. example of the generic model:

'

<ul class="lista1">
   <li>Product 1</li>
   <li>Product 2</li>
   <li>Product 3</li>
   <li>Product 4</li>
   <li>Product 5</li>
</ul>

<ul class="lista2">
   <li>Product 6</li>
   <li>Product 7</li>
   <li>Product 8</li>
   <li>Product 9</li>
   <li>Product 10</li>
</ul>

<ul class="lista3">
   <li>Product 11</li>
   <li>Product 12</li>
   <li>Product 13</li>
   <li>Product 14</li>
   <li>Product 15</li>
</ul>

'

css3

asked by Alejandro Lariccia 07.02.2018 в 03:25

source

1 answer

Run a jar called from php? Problem when calling fragment methods from another

score 0 · Answer 1

Let's try:

ul li {
    width: 200px;
    display: inline-block;
}

<ul class="lista1">
   <li>Product 1</li>
   <li>Product 2</li>
   <li>Product 3</li>
   <li>Product 4</li>
   <li>Product 5</li>
</ul>

<ul class="lista2">
   <li>Product 6</li>
   <li>Product 7</li>
   <li>Product 8</li>
   <li>Product 9</li>
   <li>Product 10</li>
</ul>

<ul class="lista3">
   <li>Product 11</li>
   <li>Product 12</li>
   <li>Product 13</li>
   <li>Product 14</li>
   <li>Product 15</li>
</ul>

Apparently, that does the trick and is technically responsive. I hope this example can help you. Greetings