In this tutorial we are creating responsive multi column list which maintain predefined number of columns in each row regardless of device size. The last output of our tutorial will be like below with 3 responsive columns in each row. You can easily change it with 2,4,5 or more columns as per your requirement.
In a grid system you can maintain responsiveness where fluid container display grids of images, videos, text, and more. In our article we are doing the same but maintaining number of grids in each row.
Let’s say we will see same 3 grids on a large screen as well as on a mobile browser using HTML ul and li tags as responsive multi column list. The components can have images, text or other contents as well components are aligned to equal level at top with dynamic height.
You can see the demo here or download the source.
HTML Markup
Write the following markup to your page at desired location in body tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <div class="container"> <ul class="fix-col fix-col-3"> <li> <img src="images/12.png"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </li> <li> <img src="images/11.png"> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </li> <li> <img src="images/10.png"> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </li> <li> <img src="images/9.png"> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </li> <li> <img src="images/8.png"> </li> <li> <img src="images/7.png"> </li> <li> <img src="images/6.png"> </li> <li> <img src="images/5.png"> </li> <li> <img src="images/4.png"> </li> <li> <img src="images/3.png"> </li> <li> <img src="images/2.png"> </li> <li> <img src="images/1.png"> </li> </ul> </div> |
we have created an unordered list with each ‘li’ tag containing our content. Also notice to line number 2 where we have specified class fix-col-3 for ul tag to show 3 columns in each row. You can change the number 3 in fix-col-3 with 2,4, 5 to show 2, 4 or 5 columns per row or can create n-column layout with simple logic I will share you later.
CSS
We have written the following CSS code into style.css file and linked into head section of our page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | .container { width: 100%; background: rgba(0, 0, 0, 0.1); } .container:before, .container:after { display: table; content: ""; } .container: after { clear: both; } .container ul.fix-col { padding: 10px; list-style-type: none; font-size: 0; } .fix-col li { display: inline-block; vertical-align: top; margin: 4% 2%; font-size: 14px; } .fix-col li img { width: 100%; height: auto; } .fix-col-2 li { width: 46%; } .fix-col-3 li { width: 29.33%; } .fix-col-4 li { width: 21%; } .fix-col-5 li { width: 16%; } @media all and (max-width: 767px) { .fix-col li { font-size: 12px; } } |
We have done all our calculation in percentage to maintain responsiveness of our columns. The list items are set to display as inline block and vertically top aligned. It will maintain lists to start at equal level in each new row. You can use float: left instead of the both two if height of your blocks is fix.
We are using left and right margin as 2% of it’s parent for each li tag so a total of 4% of width is used for left and right margins for each list.
So now Simply divide 100% width to number of columns in each row and get individual list’s width. Subtracting 4% from this width will bring you available width for each li component to create responsive multi column list.
- 2 columns each row (50% – 4%) = 40% width each
- 3 columns each row (33.33% – 4%) = 29.33% width each
- 4 columns each row (25% – 4%) = 21% width each
- 5 columns each row (20% – 4%) = 16% width each
So back to html markup at line number 2: change fix-col-3 with fix-col-n where n is one among 2, 4 or 5. These classes are already created in CSS. To prevent overlapping of text in narrow sized devices, I recommend you to keep 2 or 3 columns per row.
One last thing to note we have to remove spaces between the li elements as we created each of them into new line in our html markup (a line break and a few tabs counts as a space, just to be clear). Fortunately there are many solutions to do so which I have provided in my article Removing whitespace between HTML elements. Here we have applied font size to 0 for parent ul tag and again defined rule as font-size: 14 for child li‘s (check line number 18 & 25 respectively in CSS).
Now it’s all done. Use this little trick and if you are facing any issue in creating responsive multi column list or just wish to say something then comment below. I will sure assist you.
You can see the demo here or download the source.
So basically display: table, display: inline-block and vertical-align: top. That’s what I needed, thanks so much!