Hello, I want to create such a design Tiled design

Set a fixed height of the container, horizontal scroll and image insertion function, but because of horizontal scrolling, all the pictures go in one line, not each other, but I want the column to go in three pictures (from top to bottom), and then a new column with three pictures from top to bottom (let all the pictures be the same width and height).

.container { width: 80%; margin: 20px auto; background-color: #edf0f4; height: 760px } .gallery { width: 100%; padding: 10px; height: 100%; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; display: inline-block; } .test { display: inline-block; width: 30%; height: 30%; background-color: red; } .gallery::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #d1dae3; } .gallery::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } .gallery::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #21b8c6; } 
 <body> <div class="container"> <div class="gallery"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> </div> </body>

It turns out such nonsense Bad tile design

How to place elements in several lines with a horizontal scroll? Can I use only HTML and CSS or will I have to add javascript? Maybe there is some kind of plugin for this purpose?

  • display:flex , flex-direction:column - as an option - Grundy
  • I tried, then all the elements go in one column - Kos
  • need to add another flex-wrap:wrap - Grundy
  • Exactly, now it all worked, thanks. - Kos

2 answers 2

If the width is the same, then you need to correct .gallery and decorative .test

 .container { width: 80%; margin: 20px auto; background-color: #edf0f4; height: 760px } .gallery { width: 100%; padding: 10px; height: 100%; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; /* white-space: nowrap;*/ /* display: inline-block;*/ column-count: 3; column-gap: 5px; } .test { display: inline-block; width: 100%; height: 30%; background-color: red; margin-top: 5px; } .gallery::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #d1dae3; } .gallery::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } .gallery::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #21b8c6; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="container"> <div class="gallery"> <div class="test">1</div> <div class="test">2</div> <div class="test">3</div> <div class="test">4</div> <div class="test">5</div> <div class="test">6</div> <div class="test">7</div> <div class="test">8</div> <div class="test">9</div> <div class="test">10</div> <div class="test">11</div> <div class="test">12</div> <div class="test">13</div> <div class="test">14</div> <div class="test">15</div> </div> </div> </body> </html>

  • Thanks for the comment - Kos

 .container { width: 80%; margin: 20px auto; background-color: #edf0f4; height: 400px } .gallery { width: 90%; padding: 10px; height: 100%; margin: 0 auto; overflow-x: scroll; overflow-y: hidden; display: inline-block; } .wrapper { width: 920px; height: 100%; } .test { display: inline-block; width: 150px; height: 150px; background-color: red; } .gallery::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #d1dae3; } .gallery::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } .gallery::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #21b8c6; } 
 <body> <div class="container"> <div class="gallery"> <div class="wrapper"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> </div> </div> </body>