My image and paragraph is not positioned correctly
I’m trying to create the layout below using CSS Grid. However, my image and paragraph is not being positioned correctly.
When running my HTML and CSS:
- There is some white space at the top of my image and
- My paragraph is positioned at the very bottom
I believe the problem is with my image. Images have to maintain aspect ratio and its affecting my grid in unexpected ways.
* { margin: 0; padding: 0; } .grid { display: grid; } h1, h2, p { grid-column: 1; } img { grid-column: 2; width: 100%; }<div class="grid"> <h2>Subtitle</h2> <h1>Title</h1> <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80"> <p>Just some paragraph text...</p> </div>
I tried my best to make cols and and rows for the items here is my example
* { box-sizing: border-box; padding: 0; margin: 0; } .group { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 40%; height: 200px; text-align: center; background: #000; flex-wrap: row nowrap; } img { grid-column: 2/3; grid-row: 1/3; height: 100%; width: 100%; } h1 { grid-row: 1/2; grid-column: 1/2; } h2 { grid-row: 1/2; grid-column: 1/2; padding: 40px 0; } p { grid-row: 2/3; grid-column: 1/2; }<div class="group"> <h1>Title</h1> <h2>Subtitle</h2> <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div>
Looks like you are trying to do multiple things at once. That won’t work.
At first, wrap around your first column into another element. So the last thing is only to figure out positioning inside the first column.
.grid { display: grid; } .first-column { grid-column: 1; } .first-column-content { display: flex; justify-content: space-between; flex-direction: column; height: 100%; } img { grid-column: 2; width: 100%; }<div class="grid"> <div class="first-column"> <div class="first-column-content"> <div class="header"> <h2>Subtitle</h2> <h1>Title</h1> </div> <div class="footer"> <p>Just some paragraph text...</p> </div> </div> </div> <img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80"> </div>
