4

I'm trying to align <p> element to the left and image to the right. Image won't align to the fourth column and I need to work that out.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent img {
  grid-column: 4;
  grid-row: 1;
}
<div class="content">
  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
  </div>
</div>
Lazar Nikolic
  • 4,261
  • 1
  • 22
  • 46
Alexander
  • 307
  • 3
  • 15
  • I don’t see class .references in your HTML. – Roy Sep 22 '18 at 08:06
  • Oh, yeah, I was missing that, but I am still wondering whether it is necessary to specify the height and also can elements be aligned independently? – Alexander Sep 22 '18 at 08:09
  • It looks fine. The subcontent is exactly where you said that it should be. What is the problem? – Lazar Nikolic Sep 22 '18 at 08:12
  • Yeah, everything is fine, I was writing the class name incorrectly, but now that I am trying to align an image in the grid, it still doesn't work. Can you explain how to align image in grid properly? – Alexander Sep 22 '18 at 08:18
  • I would like to help you but you should put html and css part where img tag is visible. – Lazar Nikolic Sep 22 '18 at 08:20
  • I've updated the code with the image. I want that image to be aligned to the fourth column of the grid but it doesn't move, even when I use separate `
    ` for it. Can you help me with this?
     – Alexander Sep 22 '18 at 08:40
  • 1
    1. There's no p element, 2. If that's the case, then grid should be on #subcontent div. – VXp Sep 22 '18 at 08:56
  • Yep, I confused p element with h3 one. – Alexander Sep 22 '18 at 08:58

2 Answers2

2

I'm not exactly sure what layout you were going for over here, but you've specified that your 4th column spans 2 rows. Making this 1 row places everything in line:

.references {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent {
  grid-column: 4;
  grid-row: 1;
}
<div class="references">
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>

  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>
  </div>
</div>
MichaelvE
  • 2,558
  • 2
  • 9
  • 18
2

Is this what you want? your img isn't in a direct child of a grid so assigning grid-column to it won't work.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

.content img {
  grid-column: 4;
  grid-row: 1;
  max-height: 100%;
  max-width: 100%;
}
<div class="content">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
</div>
Chris Li
  • 2,628
  • 1
  • 8
  • 23