Placing a image next to text in a single grid

June 17, 2022

I’m trying to get my image placed next to the text on the right for each grid but whenever I place the images they get pushed under the text. I think it’s probably better to do it with flexbox but I already have the grid working as I intended it if anyone can help me with this it would be much appreciated.

.grid-rules {
    display: grid;
    grid-auto-rows: 116px;
    grid-gap: 4px 51px;
     grid-template-areas: "left right"; 
    grid-template-columns: auto auto;
    margin: 27px 14px;
}
.item {
    color: #333333; 
    font-size: 10pt; 
    font-family: ArialRegular;
}
#rule-title {
    color: #01539C;
    font-size: 12pt; 
    font-family: BurbankSmallBold;
}

hr {
    position: relative;
    border-top: 2px solid #FFBC3A;
    width: 647px;
    top: -35px;  border-top: 2px solid #FFBC3A;
    width: 647px;
}

 <div class="grid-rules">
                    <div class="item"><div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or 
    mean behavior toward other penguins. Disciplinary 
    action will be taken should any one of these occur while 
    playing.
    </div>
                    <div class="item"><div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities, 
    and sexual, racial or otherwise inappropriate talk 
    are not permitted.
    </div>
                    <div class="item"><div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share 
    your real name, phone number, address, email or 
    passwords.<img id="rule-image" src="images/personal.png">
    </div>
                    <div class="item"><div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited. 
    Players who use any third party programs while 
    playing risk being permanently banned.
    </div>
                </div>
                <hr>
                
                <button class="btn">Continue</button>

Here is an example of what I’m trying to do https://i.imgur.com/DMlyTD4.png

>Solution :

First I would recommend changing your markup so that the title and content are grouped together inside a <div>, separate from the image. See example below.

Then you could either use display: flex; or display: grid; on the .item class to align the content (name and description) and image next to each other.

.grid-rules {
  display: grid;
  grid-auto-rows: 116px;
  grid-gap: 4px 51px;
  grid-template-areas: "left right";
  grid-template-columns: auto auto;
  margin: 27px 14px;
}

.item {
  color: #333333;
  font-size: 10pt;
  font-family: ArialRegular;
  /*New stuff*/
  display: flex;
  /*or use grid*/
  /*display: grid;
  grid-template-columns: repeat(2, 2fr);
  */
}

#rule-title {
  color: #01539C;
  font-size: 12pt;
  font-family: BurbankSmallBold;
}

hr {
  position: relative;
  border-top: 2px solid #FFBC3A;
  width: 647px;
  top: -35px;
  border-top: 2px solid #FFBC3A;
  width: 647px;
}

<div class="grid-rules">
  <div class="item">
    <div>
      <div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or mean behavior toward other penguins. Disciplinary action will be taken should any one of these occur while playing.
    </div>
  </div>
  <div class="item">
    <div>
      <div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities, and sexual, racial or otherwise inappropriate talk are not permitted.
    </div>
  </div>
  <div class="item">
    <div>
      <div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share your real name, phone number, address, email or passwords.
    </div>
    <img id="rule-image" src="images/personal.png">
  </div>
  <div class="item">
    <div>
      <div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited. Players who use any third party programs while playing risk being permanently banned.
    </div>
  </div>
</div>