2

IM very new to css grid and i am having difficulties getting my images to fall into the grid for whatever reason. they seem to be representing on top of my grid not within.. any help would be appreciated..

Ive added colors to the borders to outline how i want the shape and stuff.

* {
  width: 100% margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  width: 100% position: absolute;
  display: grid;
  height: 100vh;
  border: 10px solid green;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: flex-center;
}

.grid-item {
  background-color: Grey;
  border: 4px solid orange;
  padding: 10px;
  font-size: 30px;
}

.container2 {
  object-fit: cover;
  max-width: 50% height:auto;
}

.grid-container .image {
  position: relative;
  max-width: 100%;
  height: auto;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
  max-width: 100%;
}

.div3 {
  grid-area: 1 / 4 / 2 / 5;
  max-width: 100%;
}

.div4 {
  grid-area: 1 / 5 / 2 / 6;
  max-width: 100%;
}

.div5 {
  grid-area: 2 / 3 / 3 / 4;
  max-width: 100%;
}

.div6 {
  grid-area: 2 / 4 / 3 / 5;
  max-width: 100%;
}

.div7 {
  grid-area: 2 / 5 / 3 / 6;
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item div1">
    <div class="container2">

      <img src="https://www.wendtcorp.com/wp-content/uploads/2020/08/Sikirica-600x600-1.jpg" alt="Srdjan Sikirica" class="image"> </img>

      <div class="overlay">Srdjan Sikirica</div>
    </div>

  </div>
  <div class="grid-item div2">Test2

  </div>
  <div class="grid-item div3 ">test3

  </div>
  <div class="grid-item div4 ">test4

  </div>
  <div class="grid-item div5">test5

  </div>
  <div class="grid-item div6 ">test6
  </div>
  <div class="grid-item div7">test7

  </div>

I watched some videos and this was as far as i got, i am still learning how and when to combine classes and stuff. I did some goodgle searching and most people just put blurbs of information together which wasnt helpful at all.

Thank you for any and all help you can provide!!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
James Sketch And The Beast Sul
  • 55
  • 1
  • 6
  • would this give you some hints about setting image behavior inside a grid cell : https://stackoverflow.com/questions/63600193/prevent-div-growing-stretching-when-creating-a-dynamic-grid/63601192#63601192 *(position + object-fit)* – G-Cyrillus Sep 01 '20 at 18:30

1 Answers1

2

Is this what you want?

I added the object-position: 0% 0%; if you want the image to be in the center you need to use 50% 50%

.container2 {
  width: 100%;
  height: 100%;
}
.container2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 0% 0%;
}
SBP
  • 40
  • 3
  • Thanks A Million SBP, I actually figured it out last night before i saw your comment, i didnt realize i needed to actually do some css on .container2 img haha Thanks for the quick and swift reply! marked as the answer =) – James Sketch And The Beast Sul Sep 02 '20 at 11:55