Archived topic
How to Centre/Format grid-container and grid-33 Items
7 replies · Started by Jeff on December 10, 2019
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;
}Hi there,
would you be able to provide a link to the page where we can see this issue?
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
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.
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;
}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.
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!
unsemantic relies on CSS floats and clearfixes which makes me squirm lol.... glad to be of help.
