how to make html div displays as 3 Column in pug

Question

i want to display .course-item as 3 Column the .course-item in inside foreach which gets data from data base to create .course-item div but it all displays as one Column.. how can i fix it

this is my page code

extends base

block content

  .learn
    h1 Learn Free Online 
    p 
      | Whether you're just starting out or already have some experience, we offer various Free courses designed to fit your needs. Curated from top educational institutions and industry leaders, our selection of Free courses aims to provide quality training for everyone—from individual learners seeking personal growth to corporate teams looking to upskill. For those pursuing professional advancement, skill acquisition, or even a new career path, these Free courses can be a valuable resource. Take the next step in your professional journey and enroll in a Free course today!

  .content
    .filter
      h1 Filter by
      .filter-list
        h1 Subject
        div
          input(type='checkbox', name='Computer Science', id='Computer Science', value='Computer Science')
          label(for='Computer Science') Computer Science
        div
          input(type='checkbox', name='Data Science', id='Data Science', value='Data Science')
          label(for='Data Science') Data Science
      .filter-list
        h1 Skills
        div
          input(type='checkbox', name='Computer Science', id='Computer Science', value='Computer Science')
          label(for='Computer Science') Computer Science
        div
          input(type='checkbox', name='Data Science', id='Data Science', value='Data Science')
          label(for='Data Science') Data Science
      .filter-list
        h1 Level
        div
          input(type='checkbox', name='Computer Science', id='Computer Science', value='Computer Science')
          label(for='Computer Science') Computer Science
        div
          input(type='checkbox', name='Data Science', id='Data Science', value='Data Science')
          label(for='Data Science') Data Science

    .course-menu
      h1 Browse free Courses
      each courses in cour
        each _ in [1, 2]
          .course-item
            img(src="#")
            h2= courses.course_name
            p= courses.short_description
            p
              strong=courses.course_category

and this is the part that i want to displays as 3 column

      each courses in cour
        each _ in [1, 2]
          .course-item
            img(src="#")
            h2= courses.course_name
            p= courses.short_description
            p
              strong=courses.course_category