[Resolved] How to Centre/Format grid-container and grid-33 Items

Home Forums Support How to Centre/Format grid-container and grid-33 Items

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1100138
    Jeff

    Hi All,

    Sorry if this is a noob question, but I’ve been struggling with this for 2 days now… Even after reading through numerous threads here on GP forums.

    On my homepage I am using Sections (Container Width = Full Width) and I am trying to create a simple 3 column layout with a border box around each item. I also have Tom’s awesome Simple CSS plugin installed so am applying the CSS to just this page.

    I first used div class grid-33 and it does the job, but I wanted some space between each box so I tried grid-30 instead with margin:10px. (if I do grid-33 with margin:10px it bumps the 3rd box to a new row). This works… BUT… The 3 boxes are not centred on the screen. The centre box is not centre to the screen, it’s off centre to the left, and there is a noticeably larger space to the right of the right box than to the left of the left box. It’s like all 3 boxes need to shift to the right to be centred.

    I tried wrapping everything in a grid-container with max-width: 100%; and margin:0; padding:0; but that didn’t seem to work and the boxes appear more contained (and still not centred) than they do when I don’t wrap it..

    Any help would be much appreciated. Code below.

    Thanks,
    Jeff

      <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
           <h3><strong>My Heading1</strong></h3>
        Column 1
      </div>
    
      <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
           <h3><strong>My Heading2</strong></h3>
        Column 2
      </div>
    
      <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
           <h3><strong>My Heading3</strong></h3>
        Column 3
      </div>

    CSS:

    h3 {
      color: orangered;
      font-size: 18px;
      text-align: center;
    }
    
    p {
      color: black;
      font-size: 15px;
      text-align: left;
    }
    
    .grid-30 {
      background-color: white;
      border-style: solid;
      border-color: orangered;
      border-width: 3px;
      margin: 10px;
      padding: 15px;
    }
    
    .custom-container {
      max-width: 2000px;
      background-colour: red;
      align: center;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    #1100293
    David
    Staff
    Customer Support

    Hi there,

    would you be able to provide a link to the page where we can see this issue?

    #1100563
    Jeff

    Hi David,

    Sure thing. I just added the code to a new site I’m working on.

    You can check it out at:
    http://sccmpowershell.com/about-me

    Thanks!
    Jeff

    #1100932
    David
    Staff
    Customer Support

    You need to add the grid-container to your HTML ie.

    <div class="grid-container custom-container">
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading1</strong></h3>
            Column 1
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading2</strong></h3>
            Column 2
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading3</strong></h3>
            Column 3
        </div>
    </div>

    Then use the custom-container class to overwrite the max-width.

    #1101163
    Jeff

    Thanks David,

    I tried that too and the max-width seems to work but no joy on the centering part. I’ve updated the page. You can see the result at http://sccmpowershell.com/gptest.

    If we can get the 3 boxes centred in the blue rectangle we’ll be good! 🙂

    HTML:

    <p style="text-align: center;">CENTER - Custom Container</p>
    <div class="grid-container custom-container">
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading1</strong></h3>
            Column 1
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading2</strong></h3>
            Column 2
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading3</strong></h3>
            Column 3
        </div>
    </div>
    
    <hr>
    <p style="text-align: center;">CENTER - No Container</p>
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading1</strong></h3>
            Column 1
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading2</strong></h3>
            Column 2
        </div>
    
        <div class="grid-30 tablet-grid-33 mobile-grid-100 first-column">
            <h3><strong>My Heading3</strong></h3>
            Column 3
        </div>

    CSS:

    h3 {
      color: orangered;
      font-size: 18px;
      text-align: center;
    }
    
    p {
      color: black;
      font-size: 15px;
      text-align: left;
    }
    
    .grid-30 {
      background-color: white;
      border-style: solid;
      border-color: orangered;
      border-width: 3px;
      margin: 10px;
      padding: 15px;
    }
    
    .custom-container {
      max-width: 100% !important;
      background-color: steelblue !important;
      align: center !important;
      margin: 0 !important;
    }
    #1101231
    David
    Staff
    Customer Support

    Personally i find the unsemantic grid a bit of pain. I would do something like this:

    <div class="flex-grid">
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
        <div class="flex-item">
            <div class="flex-inner">
                <h2>Grid item</h2>
            </div>
        </div>
    </div>
    .flex-grid {
        padding: 20px;
        background-color: blue;
    }
    
    .flex-item {
        padding: 10px; /* itme Gutters */
        box-sizing: border-box;
    }
    
    .flex-inner {
        background-color: white;
        border-style: solid;
        border-color: orangered;
        border-width: 3px;
        padding: 15px;
    }
    
    @media (min-width: 769px) {
        .flex-grid {
            display: flex;
            justify-content: center;
        }
        .flex-item {
            flex-basis: 33%;
        }
    }

    It requires a little more mark up by introducing the inner container on the grid item flex-inner. But this allows you use padding on the flex-item to control your gutters.

    #1101266
    Jeff

    Thanks David. Yes it has been a pain! 🙂 I’ve tried your code and it works great. I should be good to customize it from here. Thank-you very much for all your help!

    #1101290
    David
    Staff
    Customer Support

    unsemantic relies on CSS floats and clearfixes which makes me squirm lol…. glad to be of help.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.