Problem with getting grid containers to stay put ( they expand or move to the left when filled)

[hobnobby]

I am having problems with getting a container to stay as I have set them.

I have also tried various text-wraps without success.

I have tried all sorts of stuf in an attempt to sort this mproblem out. I discovered that is easier to ride a motorbike with chocolate handlebars in the desert!

The problem occurs when text needs to be wrapped. I’m not sure if it’s becuase the text is part of a UL list. (hopefully, i’ve been able to attach 2 screen prints.

one shows the set up how it should be, The other with the added text.

is there a way to fix this?
CSS code

grid-container3 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 20px;
 /* background-color: (255,90,205,0.1); */
 width: 50% 50%; 
  padding: 10px;
  place-items: center;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}
.grid-item4 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.00rem;
 place-items:center;
 text-wrap:stable;
 
}

HTML Code

 <div class="grid-container2">
        <div class="grid-item3">
          <div class="herobox1">
            <h2> Book by 31st May 2024 and Get a 15% Discount</h2>
             <img src="hop-mad.jpg">
          </div>
         </div>
         </div>

      <div class="grid-container3">
        <div class="grid-item4">
          <h3>Energy Performance Certificate - EPC</h3>
         <p><b>Some reasons as to why you need an EPC:</b> </p>
         <ul>
          <li>For selling Sell your home or a domestic property</li>
          <li>For renting out a domestic property</li>
          <li>For renewing or updating your existing certificate</li>
          <li>For finding out how to reduce your carbon footprint</li>
          <li>For a Trustmark Gaurantee for the efficiency of the 
            <br>energy saving schemes recommended inyour EPC</li>
        </ul>     
      </div>

In this print: I have used text wrap but it has pushed the grid to the left.

in this view: I have used a
. It has kept the grids in place but the text is much narrower than 50% (width of a grid). It does slightly stick out to the right as well.

[PaulOB]

Hi,

We’ll need a little more code to get a working example of what you have so far. I’ve put the code you posted into a codepen and this is what I get.

It looks as I expect from the code supplied. The element .grid-container3 is 100% of the viewport wide and the grid-item4 containers will be shrunk to fit and centred in the available viewport width due the place-items:center on its grid parent. If you remove the place-items:center then the 2 grid-item4 containers will stretch to 50% each.

If there is a page wrapper perhaps containing the whole thing then it won’t be viewport width like my demo but I would need more code to see what else is going on

[semicodin]

I just wanted to point out there is a typo: Guarantee. Welcome.

[hobnobby]

Hi PaulOB,
I think that I have just fixed it. I’m going to test it on mobiles when I finish the page tomorrow.

I found this snippet: grid-auto-columns: 50%;

I was just login in to put this notice up.

[hobnobby]

Thank you for pointing out my misteak. I’ll be more carfull next time!