I'm having troubles trying to create a grid layout like this

Grid layout

what i assumed was to create a row and have 2 columns divided, and create a row col inside each of the 2 columns and in each col have a card.

this is my code

<div >
  <div >
    <div >
      Modules
      <div >
        <div >
          <div >
            <div >
              <img src="/images/pat.jpg"  alt="module 1">
              <div >
                title
              </div>
            </div>
          </div>

          <div >
            <div >
              <img src="/images/pat.jpg"  alt="module 1">
              <div >
                title
              </div>
            </div>
          </div>

          <div >
            <div >
              <img src="/images/pat.jpg"  alt="module 1">
              <div >
                title
              </div>
            </div>
          </div>
          <div >
            <div >
              <div >
                <img src="/images/pat.jpg"  alt="module 1">
                <div >
                  title
                </div>
              </div>
            </div>

            <div >
              <div >
                <img src="/images/pat.jpg"  alt="module 1">
                <div >
                  title
                </div>
              </div>
            </div>

            <div >
              <div >
                <img src="/images/pat.jpg"  alt="module 1">
                <div >
                  title
                </div>
              </div>
            </div>
          

        
   <div >
      Schedule
      <div >
        <div >
          <div >
            <img src="/images/star.jpg"  alt="module 1">
            <div >
              title
            </div>
          </div>
        </div>
        <div >
          <div >
            <img src="/images/star.jpg"  alt="module 1">
            <div >
              title
            </div>
          </div>
        </div>
   </div>

and this is what came out my layout

I dont understand why the cards in my second row aren't the same length too?

CodePudding user response：

first you need to add outer row and add 2 columns and then inside first column add row then give your columns col-3, col-4 how much you want in a row same goes to second column. I hope down script help you

      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <div >
        <div >
            <!-- outer grid first column -->
            <div >
                Modules
                <div >
                    <!-- first column inner grid  -->
                    <div >
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                        <div >
                            <div >
                                <img src="/images/pat.jpg"  alt="module 1">
                                <div >
                                    title
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- outer grid second column -->
            <div >
                Schedule
                <!-- second column inner grid  -->
                <div >
                    <div >
                        <div >
                            <img src="/images/star.jpg"  alt="module 1">
                            <div >
                                title
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <img src="/images/star.jpg"  alt="module 1">
                            <div >
                                title
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>