слайд не соответствует измерениям сетки

Question

Идентификатор c4 занимает строку 2 / интервал 1, и ползунок должен брать эту строку только потому, что его измерения идут из строки 2 / интервал 1, как бы я правильно поместил его в слайд Div?

#c4{
	background: white;

	z-index: 0;

	min-height: 200vh;
  min-width: 100vw;


	display: grid;

	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 20vh 60vh 5vh 15vh 15vh 85vh;
}

#c4 h1{
	grid-column: 1 / -1;
	grid-row: 1 / span 1;

	text-align: center;
	align-self: center;

	font-size: 2em;
}

#c4 .textoscurso{
	grid-column: 3 / span 3;
	grid-row: 2 / span 1;

	align-self: center;
}
#c4 .textoscurso p{
	align-self: center;
}

#c4 .slidecurso{
	grid-column: 7 / -1;
	grid-row: 2 / span 1;
}

		#c4 .slidecurso slider{
			display: inline-block;
			width: 100%;
			height: 100%;
			background: #0ff;
			overflow: hidden;
			position: absolute;
		}

		slider > *{
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			background: #0ff;
			animation: slide 12s infinite;
			overflow: hidden;
		}

		slide:nth-child(1){
			left: 0;
			animation-delay: -1s;
			background-image: url(../img/curso.jpg);
			background-size: cover;
			background-position: center;
		}

		slide:nth-child(2){
			animation-delay: 2s;
			background-image: url(../img/curso.jpeg);
			background-size: cover;
			background-position: center;
		}

		slide:nth-child(3){
			animation-delay: 5s;
			background-image: url(../img/curso.jpg);
			background-size: cover;
			background-position: center;
		}

		slide:nth-child(4){
			left: 0;
			animation-delay: 8s;
			background-image: url(../img/curso.jpg);
			background-size: cover;
			background-position: center;
		}


		slide p{
			font-family: Comfortaa;
			font-size: 70px;
			text-align: center;
			display: inline-block;
			width: 100%;
			margin-top: 100px;
			color: #fff;
		}

		@keyframes slide{
			0%{left: 100%; width: 100%;}
			5%{left: 0%;}
			25%{left: 0%;}
			30%{left: -100%; width: 100%;}
			30.0001%{left: -100%; width: 0%;}
			100%{left: 100%; width: 0%;}
		}



#c4 .motivos{
	background: lightgray;

	grid-row: 4 / span 2;

	z-index: 10;
}

#c4 .moti-1{
	grid-column: 2 / span 2;
}
#c4 .moti-2{
	grid-column: 5 / span 2;
}
#c4 .moti-3{
	grid-column: 8 / span 2;
}

#c4 .c4-2{
	grid-row: 5 / -1;
	grid-column: 1 / -1;

	background: black;
}

<content id="c4">
				
				<h1>Venha aprender com a gente</h1>

				<div class="textoscurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas posuere purus malesuada mattis.</div>

				<div class="slidecurso">
					<slider>
						<slide><p>Slide 1</p></slide>
						<slide><p>Slide 2</p></slide>
						<slide><p>Slide 3</p></slide>
						<slide><p>Slide 4</p></slide>
					</slider>
				</div>

				<div class="motivos moti-1"></div>
				<div class="motivos moti-2"></div>
				<div class="motivos moti-3"></div>

				<div class="c4-2"></div>

			</content>

Синий слайд имеет неправильный размер, как и должно быть, и затем он выходит за пределы ограниченной высоты. Мне нужно, чтобы он был точно в строке 2 / apan 1. Пожалуйста

Answer 1

Вам необходимо добавить position:relative к элементу слайда, поскольку дочерний элемент установлен на position:absolute. В этом случае ширина / высота будет относительно этого элемента, и у вас не будет переполнения:

Я также удалил некоторые бесполезные свойства, которые могут создавать проблемы (например, min-width:100vw):

body {
 margin:0;
}

#c4 {
  background: white;
  min-height: 200vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 20vh 60vh 5vh 15vh 15vh 85vh;
}

#c4 h1 {
  grid-column: 1 / -1;
  grid-row: 1 / span 1;
  text-align: center;
  align-self: center;
  font-size: 2em;
}

#c4 .textoscurso {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;
  align-self: center;
}

#c4 .textoscurso p {
  align-self: center;
}

#c4 .slidecurso {
  grid-column: 7 / -1;
  grid-row: 2 / span 1;
  position: relative;
}

#c4 .slidecurso slider {
  width: 100%;
  height: 100%;
  background: #0ff;
  overflow: hidden;
  position: absolute;
}

slider>* {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #0ff;
  animation: slide 12s infinite;
  overflow: hidden;
}

slide:nth-child(1) {
  left: 0;
  animation-delay: -1s;
  background-image: url(../img/curso.jpg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(2) {
  animation-delay: 2s;
  background-image: url(../img/curso.jpeg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(3) {
  animation-delay: 5s;
  background-image: url(../img/curso.jpg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(4) {
  left: 0;
  animation-delay: 8s;
  background-image: url(../img/curso.jpg);
  background-size: cover;
  background-position: center;
}

slide p {
  font-family: Comfortaa;
  font-size: 70px;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 100px;
  color: #fff;
}

@keyframes slide {
  0% {
    left: 100%;
    width: 100%;
  }
  5% {
    left: 0%;
  }
  25% {
    left: 0%;
  }
  30% {
    left: -100%;
    width: 100%;
  }
  30.0001% {
    left: -100%;
    width: 0%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

#c4 .motivos {
  background: lightgray;
  grid-row: 4 / span 2;
  z-index: 10;
}

#c4 .moti-1 {
  grid-column: 2 / span 2;
}

#c4 .moti-2 {
  grid-column: 5 / span 2;
}

#c4 .moti-3 {
  grid-column: 8 / span 2;
}

#c4 .c4-2 {
  grid-row: 5 / -1;
  grid-column: 1 / -1;
  background: black;
}

<content id="c4">

  <h1>Venha aprender com a gente</h1>

  <div class="textoscurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas posuere purus malesuada mattis.</div>

  <div class="slidecurso">
    <slider>
      <slide>
        <p>Slide 1</p>
      </slide>
      <slide>
        <p>Slide 2</p>
      </slide>
      <slide>
        <p>Slide 3</p>
      </slide>
      <slide>
        <p>Slide 4</p>
      </slide>
    </slider>
  </div>

  <div class="motivos moti-1"></div>
  <div class="motivos moti-2"></div>
  <div class="motivos moti-3"></div>

  <div class="c4-2"></div>

</content>