body{
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.hero{
display: grid;
grid-template-columns: 90px 150px 150px 150px;
grid-template-rows: repeat(7, 60px);
/* justify-content: center; */
grid-gap:10px;
}
.head-hero:nth-last-of-type(1){
background-color: lightblue;
display: grid;
grid-template-columns: 20% 60% 10% 10% ;
grid-template-rows: 60px;
grid-column-start: 1;
grid-column-end: 6;
justify-items: center;
align-items: center;
}
.hero-menu:nth-last-of-type(1){
background-color: lightcoral;
grid-row-start:2;
grid-row-end: 8;
grid-column-start: 1;
grid-column-end: 2;
display: grid;
grid-template-rows: 5% 5% 80% 50% ;
}
.title-section{
grid-column-start: 1;
grid-column-end: 6;
}
.hero-principal{
display: grid;
grid-column-start: 2;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 6;
grid-template-columns:150px 150px 150px;
grid-template-rows: 8.3% 25% 8.3% 25% 8.3% 25%;
grid-gap:28px;
}
.card-design{
position: relative;
cursor: pointer;
display: block;
}
.post-image{
margin: 0;
}
.post-image img{
width: 100%;
vertical-align: top;
}
.post-text{
background-color: rgba(167, 53, 53, 0.4);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
height: 50%;
align-items: baseline;
justify-content: baseline;
color: white;
text-align: center;
}
.title-text{
font-weight: bold;
text-align: center;
display: inline-block;
}
.text{
font-size: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>prueba movi</title>
</head>
<body>
<div class="hero">
<header class="head-hero">
<h1 class="title-movie">
Movie.tv
</h1>
<div class="browser-head">
<input type="text" placeholder="Busca tu pelicula favorita aqui!">
</div>
<div class="user-head">
<h3 class="name-user">Arturo Becerra</h3>
</div>
<picture class="image-profile">
<img src="los-chicos-del-barrio.jpg" alt="" width="50px" height="50px">
</picture>
</header>
<div class="hero-menu">
<p>home</p>
<p>tendring</p>
<p>like</p>
<p>ajutes</p>
</div>
<section class="hero-principal">
<h3 class="title-section">
Mas vistas!
</h3>
<div class="hero-card1">
<a href="" class="card-design">
<figure class="post-image">
<img src="./los-chicos-del-barrio.jpg" alt="" width="150px" height="100px" >
</figure>
<div class="post-text">
<p>
<span class="title-text">
Los chicos del barrio
</span>
<span class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut itaque delectus dolore numquam nobis unde.</span>
</p>
</div>
</a>
<a href="" class="card-design">
<figure class="post-image">
<img src="./los-chicos-del-barrio.jpg" alt="" width="150px" height="100px" >
</figure>
<div class="post-text">
<p>
<span class="title-text">
Los chicos del barrio
</span>
<span class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut itaque delectus dolore numquam nobis unde.</span>
</p>
</div>
</a>
<a href="" class="card-design">
<figure class="post-image">
<img src="./los-chicos-del-barrio.jpg" alt="" width="250px" height="200px" >
</figure>
<div class="post-text">
<p>
<span class="title-text">
Los chicos del barrio
</span>
<span class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut itaque delectus dolore numquam nobis unde.</span>
</p>
</div>
</a>
</section>
</div>
</body>
</html>
estoy comenzando en el desarrollo web y en estos momento estoy aprendiendo a utilizar css grid, estoy realizando una prueba del curso donde creo una grid principal y dentro de cada casilla principal agrego un subgrid pero al momento de posicionar las grillas la clase .title-section no toman el grid de ninguna manera, ya he intentado mirando y modificando cada línea de código y no he encontrado cual es el problema organice las filas y columnas de tal manera que cada articulo tomara su posición pero tampoco, agradecería mucho su ayuda la verdad no se que estoy haciendo mal.