Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Displaying Database Results across Multiple Columns with 1 Line of CSS


In this video, we'll loop over data coming in from the back-end and display it in a responsive multi-column layout.

Quick Jump: Demo Video

This strategy will work with any web framework on the back-end since all we’re doing is attaching a CSS class to a specific element in the back-end template code.

Demo Video


This is set up to work with Bootstrap 4 (SCSS) but column-count: 3 is the main takeaway.

@include media-breakpoint-up(md) {
  .responsive-columns {
    column-count: 2;

@include media-breakpoint-up(lg) {
  .responsive-columns {
    column-count: 3;


<ul class="responsive-columns">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

Have you used this CSS selector to display multiple columns? Let me know below!

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.