html - List in columns layout depending on viewport width -
how can make several columns 1 list css?
number of columns must change depending on screen width media queries shown here :
lage screen:
row1 row6 row11 row2 row7 row12 row3 row8 row13 row4 row9 row14 row5 row10
middle screen:
row1 row8 row2 row9 row3 row10 row4 row11 row5 row12 row6 row13 row7 row14
small screen:
row1 row2 row3 row4 row5 row6 row7 row8 row9 row10 row11 row12 row13 row14
here html code :
<ul> <li>row1</li> <li>row2</li> <li>row3</li> <li>row4</li> <li>row5</li> <li>row6</li> <li>row7</li> <li>row8</li> <li>row9</li> <li>row10</li> <li>row11</li> <li>row12</li> <li>row13</li> <li>row14</li> </ul>
you can css multi-column layout
. add support
isn't best.
or if can set fixed height on ul
use flexbox , flex-direction: column;
demo
not "flexible" solution.
ul { -webkit-column-count: 3; /* chrome, safari, opera */ -moz-column-count: 3; /* firefox */ column-count: 3; list-style-type: none; } @media(max-width: 992px) { ul { -webkit-column-count: 2; /* chrome, safari, opera */ -moz-column-count: 2; /* firefox */ column-count: 2; } } @media(max-width: 480px) { ul { -webkit-column-count: 1; /* chrome, safari, opera */ -moz-column-count: 1; /* firefox */ column-count: 1; } }
<ul> <li>row1</li> <li>row2</li> <li>row3</li> <li>row4</li> <li>row5</li> <li>row6</li> <li>row7</li> <li>row8</li> <li>row9</li> <li>row10</li> <li>row11</li> <li>row12</li> <li>row13</li> <li>row14</li> </ul>
Comments
Post a Comment