LDX Design

Course Grid in 1 column? Grid CSS not loading? Here’s the fix.

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

Is your LearnDash course grid CSS not loading? Perhaps your courses are only being displayed in one column, instead of 3 or 4 columns. This is a common issue when using the course grid with Elementor, Divi & other page builders.

Let’s fix this problem and make sure your course grid is displaying exactly the number of columns you told it to (using the col="X" parameter).

Why does this happen?

Before we get into a few possible solutions, let’s briefly cover why this happens.

When using the LearnDash course grid with the [ld_course_list] shortcode or LD Course List block, LearnDash ensures that all CSS needed to output the grid styles is loaded on the page, including the proper grid column format. LearnDash talks to WordPress and everything works as it should.

Recommended ProductKinsta hosting to boost site speed

When page builders get involved, it’s not that simple. In order for some page builders to offer more advanced design & editing features, they don’t use the same technology that WordPress’ editor uses to insert things onto the page. This different way of rendering content is what trips things up.

It’s neither LearnDash nor Elementor’s (or Divi’s or Beaver Builder’s) fault, really. It’s just the result of using more tools that all need to communicate with each other, which always adds more complexity.

Possible Solutions

There are two solutions we’re going to cover. If you’re experiencing a course grid and/or column issue with Elementor, the first solution is almost guaranteed to work.

I’ll provide a second, more technical, solution that you can try if you’re still having trouble.

Remove, then add shortcode back in

This solution is going to sound pretty silly, but it’s the turn-it-off-and-back-on-again type of thing. For Elementor, it goes like this:

  1. Cut/Remove the [ld_course_list] shortcode from the shortcode widget
  2. Click the green “Apply” button right above the shortcode area
  3. Paste the [ld_course_list] shortcode back into the shortcode widget
  4. Click the “Apply” button again
  5. Then click the “Update” button at the bottom of the page

Now reload your live website. All the course grid CSS should be applied, and you should see the correct amount of columns.

If you’re using a performance or caching plugin, please clear all cache before reloading the page.

Recommended Product

Rapyd WordPress Hosting
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.

Get 25% OFF Rapyd Today →

I have confirmed this works for Elementor but I don’t know about other page builders. My advice is to do the same thing, only some of the “Apply” and “Update” buttons might be missing, or called something different.

Read our comprehensive guide on customizing the LearnDash course grid →

Force loading of course grid assets

This solution is a little more technical, but if the first solution fails, you can give this a try. It uses a simple LearnDash function to force the loading of the grid assets.

My preferred way to implement code like this is with the Code Snippets plugin. You could also add this code to the functions.php file of your child theme (if you’re using one), but I find Code Snippets to be easier to manage and less likely to bring your site down if you make a mistake.

  1. Install & activate “Code Snippets” from your WordPress plugins page
  2. Navigate to Snippets > Add New in the left sidebar
  3. Give your snippet a name. Something like “LearnDash – Force loading of course grid assets”
  4. Paste the code snippet into the Code area
  5. Choose the Only run on site front-end option
  6. Click the Save Changes and Activate button

Here’s the code you’ll use:

 * Force loading of the Course Grid CSS assets.
add_action( 'wp_enqueue_scripts', function() {


} );

If you know a little PHP, you could apply a conditional statement inside the function to only load the course grid assets on specific pages. But simply using it as it is written above should be fine.

If this worked for you, please drop a line in the comments with which page builder you’re using and how you’re inserting the grid. Let’s help each other out 🤝.

Uncanny Owl logo
Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

Recommended Product

Uncanny Automator logo
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.

 • Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
 • Trusted by 30,000 companies

Get 10% OFF with code affiliate10-dwarfel


How to Change the “Leave a Comment” Title in Focus Mode


LearnDash + Divi – Issues & Solutions


  1. Thank you for this, the PHP for the functions file worked perfectly!

  2. Van

    I’ve tried to add this to the functions.php of a child theme and it doesn’t seem to be working. Neither the styles or javascript seem to be loading. Has anyone got any ideas?

    • It’s possible that LearnDash changed or removed the function in a newer version of LearnDash. It’s also possible that Elementor or another page builder has changed the way they process shortcodes. There could be several things at play here, in addition to a specific issue with your site setup. It’s impossible to know without looking deeper at your site. Perhaps hire a LearnDash expert to take a look.

  3. Kiran Suthar

    Thankyou for the simplest solution!

  4. Gaby

    This worked for me… I used the code snippet and using Divi theme builder to build out the courses archive page. Thanks 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *