0

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.

1

1 respuesta 1

0

He estado mirando tu código... el h3 de las clase ".title-section" ya esta ocupando desde la columna 1 hasta la 6. Si le añades color de fondo y altura lo podrás ver, si lo quieres centrado añádele text-align: center.

Te lo dejo en este snippet

.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;
}

.title-section{
   grid-column-start: 1;
   grid-column-end: 6;
   
   /* Css nuevo */
   background-color: lightgreen; 
   height: 26px;
   text-align: center;
}

También creo que sería mejor declarar primero el contenedor grid "hero-prinicipal" y luego el elemento que quieres posicionar en el grid ".title-section".

Un saludo y espero haberte ayudado :D

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.