Two CSS grids side by side, one is scrollable, the other isn’t

Question 1

I’ve made a section of my site to have two grids side by side. On the left-hand side is one big static (sticky in my case) image, on the right-hand side is a (grid) long column of several other images, that is scrollable. So as the user scrolls the grid on the right-hand side of the page, the grid on the left remains ‘stuck’ until the user has reached the end of the grid on the right.

My code below works, but I was wondering if there a more elegant way of doing this?

html,
body,
p,
ol,
ul,
li {
  background-color: #1A1A1A;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 95%;
  margin: auto;
  position: relative;
}

#tattoos {
  width: 95%;
  display: flex;
  justify-content: space-between;
  height: 2000px;
  position: relative;
}

#sectionOne {
  display: grid;
  height: 100vh;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 15px;
  width: 60%;
  position: sticky;
  top: 0;
}

.gallery-item {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  text-transform: uppercase;
  font-family: 'Lora';
  font-weight: 700;
  color: white;
  font-size: 9vw;
}

#image-one {
  background-image: url("https://i.ibb.co/HXfG735/tattoo.jpg");
  background-size: cover;
  background-position: 0% 80%;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.8);
  margin: 4% 0;
}

.sectionTwo {
  width: 37%;
  display: grid;
  height: 1940px;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 30px;
  margin: 2.5% 0;
}

#image-two {
  background-image: url("https://i.ibb.co/kBJrryt/7ab34470-9318-4fc1-a6da-656ca31399c5.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-three {
  background-image: url("https://i.ibb.co/SKCnT4d/b19aaf2a-84cf-42b4-9ccd-6205ca1be395.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-four {
  background-image: url("https://i.ibb.co/xF4Qv50/b5d6695b-2142-42cc-8eef-2963311edfd6.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-eight {
  background-image: url("https://i.ibb.co/0nY3VDG/d1ecf205-6b1b-4a1a-b94b-7d75aa177464.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-nine {
  background-image: url("https://i.ibb.co/QYf6vDY/48a63fe2-066b-42d1-9211-040c6977ceff.jpg");
  background-size: cover;
  background-position: 0% 40%;
}

#image-ten {
  background-image: url("https://i.ibb.co/7RdJqgP/ce30fff2-1679-403f-8431-c6be4f8b1466.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-twelve {
  background-image: url("https://i.ibb.co/BtJxDc7/24b54530-710f-4173-a32a-36bd24a496e0.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

<div id="tattoos" class="container">
  <section id="sectionOne">
    <div id="image-one" class="gallery-item">
      tatujes
    </div>
  </section>
  <section class="sectionTwo">
    <div id="image-two" class="gallery-item"></div>
    <div id="image-three" class="gallery-item"></div>
    <div id="image-four" class="gallery-item"></div>
    <div id="image-eight" class="gallery-item slide"></div>
    <div id="image-nine" class="gallery-item slide"></div>
    <div id="image-ten" class="gallery-item slide"></div>
    <div id="image-twelve" class="gallery-item slide"></div>
  </section>
</div>

Expand snippet

Question 2

Although this is not a full answer It will shorten your code,
You could remove ‘background-size:cover;’ & replace it with a class of bGCov,
(As your declaring this multiple times & if your application grows larger With many more Images, this will save many, many lines of code)
Aswell as Use Bitly URL shortener, to shorten all of your Image URL links, make sure to name them something farely short but related to the actual image as it makes keeping track of them easier later on.
Also if you started using scss background-position and a few other things could be made into variables.
this would shorten you code for a few lines…

Leave a Reply Cancel reply