css Question posted in
Some basic documentation can be found here.

Positioning an image, text, and a link inside of a CSS grid item using flex

I’m creating an html/css layout which needs to look like this:

(https://i.sstatic.net/Z49ekM8m.png)

Each box is a link. To extend the active link area over the entire box, and to get the text positioning at the bottom of each grid item, I set each link to be a flexbox. So I currently have a grid layout with a flex box within each grid item if that makes sense.

So far, I’ve been able to accomplish this:

(https://i.sstatic.net/itbwRXvj.png)

However, when I try to get an image into the "Instructor Led Training" box, I run into all sorts of problems. How can I add my image without disrupting the rest of my design?

I’ve tried putting the image into the div for the flex box, and it just blows the whole thing up.

This is the "working" code, before I tried to add my image:

.vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">
  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>
  <div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px;">Instructor Led Training</a></div>
  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>
  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>
  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>
</div>
Tags:

2

Answers


  1. 0

    Well, this is a bit shaky foundation. I will just add something without disturbing the flow by using position: asbsolute for the img. This entails that it’s parent be position: relative and also the caption needs it to be above the image.

    .vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.vtx_gi {
  position: relative;
  overflow: hidden;
}

.vtx_gi .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 100%;
}
    <div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">

  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>

  <div class="vtx_gi" id="vtxgi2">
    <img class="image" src="https://picsum.photos/100" alt="Image">
    <a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px; position: relative;">Instructor Led Training</a></div>

  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>

  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>

  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>

</div>
    Login or Signup to reply.
  2. 0

    Flex is fine for the other tiles, but for the tile containing the image, I would use a grid to manage its layout. This allows us to size the second row (containing the text) as auto, which allows it to grow as the text wraps on narrow viewports, and then size the first row (containing the image) as 1fr and therefore simply take up the remaining space.

    .vtx_gc_001 > a:nth-child(2) {
  display: grid;
  grid-template-rows: 1fr auto;
}

    You also need to use a relatively-positioned wrapper around your image (I have used a <figure>), so that you can set your <img> to be absolutely positioned. This ensures that the intrinsic dimensions of the image have no effect on the rest of the layout.

    body {
  background-color: #f1f1f1;
  margin: 30px;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.vtx_gc_001 {
  height: 450px;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.vtx_gc_001 > a {
  height: 100%;
  border-radius: 50px;
  display: flex;
  justify-content: start;
  align-items: end;
  color: white;
  padding: 20px 30px;
  text-decoration: none;
  box-sizing: border-box;
}

.vtx_gc_001 > a:nth-child(1) {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

.vtx_gc_001 > a:nth-child(2) {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-content: stretch;
  align-items: stretch;
  gap: 20px;
}

.vtx_gc_001 > a:nth-child(2) > figure {
  margin: -20px -30px 0 -30px;
  position: relative;
}

.vtx_gc_001 > a:nth-child(2) > figure > img {
  position: absolute;
  left: 3px;
  top: 0;
  width: calc(100% - 3px);
  height: 100%;
  object-fit: cover;
}

.vtx_gc_001 > a:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

.vtx_gc_001 > a:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

.vtx_gc_001 > a:nth-child(5) {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}
    <div class="vtx_gc_001">
  <a href="">Exchange 2024</a>
  <a href="">
    <figure>
      <img src="https://picsum.photos/id/1074/300">
    </figure>
    Instructor Led Training
  </a>
  <a href="">Course Catalog</a>
  <a href="">Partner Resources</a>
  <a href="">Get Certified!</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search