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

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 Product

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.

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

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() {

	learndash_course_grid_load_resources();

} );

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 🤝.