Results 1 to 4 of 4

Thread: [RESOLVED] Can't figure out how to get the this grid layout?

  1. #1

    Thread Starter
    New Member
    Join Date
    Apr 2024
    Posts
    5

    Resolved [RESOLVED] Can't figure out how to get the this grid layout?

    I'm trying to learn Bootstrap. The image pictured below is what I am trying to create and can't figure out how to do this. Please help.

    Name:  Grid.jpg
Views: 907
Size:  7.8 KB

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,997

    Re: Can't figure out how to get the this grid layout?

    Bootstrap uses a 12-column grid system. It looks like you have two columns that take up 1 column each and then the last takes up the remainder. However, as a caveat your first column takes up 4 rows.

    You don't want to use Bootstrap for this use case, rather you use a <table> and specify the rowspan attribute (documentation) of cell 1,1. Here is an example:
    Markup:
    HTML Code:
    <table border="1">
      <tr>
        <td rowspan="4">1,1</td>
        <td>2,1</td>
        <td>3,1</td>
      </tr>
      <tr>
        <td>2,2</td>
        <td>3,2</td>
      </tr>
      <tr>
        <td>2,3</td>
        <td>3,3</td>
      </tr>
      <tr>
        <td>2,4</td>
        <td>3,4</td>
      </tr>
    </table>
    Styling
    Code:
    table {
      width: 100%;
    }
    
    table tr td:last-of-type {
      width: 100%;
    }
    Live Demo: https://jsfiddle.net/nbxueh2k/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    New Member
    Join Date
    Apr 2024
    Posts
    5

    Re: Can't figure out how to get the this grid layout?

    I wondered about doing that as my first thought because it is pretty simple, however, then I wondered how responsive it would be. Turns out it's pretty responsive!

    Thanks for the help!
    Last edited by bmckphotos; Aug 12th, 2024 at 05:56 PM.

  4. #4
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,997

    Re: Can't figure out how to get the this grid layout?

    On its own it isn't responsive, but how would you want it to look on smaller devices? It isn't immediately obvious based on your larger device image.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width