Tengo unas grid areas, pero que no me las ubica como tal. Yo puse que haya dos columnas y dos filas, pero que la segunda columna siempre sea la misma. Es decir, puse un "grid-template-area:"parrafo imagen" "boton imagen";", pero aún así el problema persiste, hay una fila por debajo de la imagen, que no tendría que estar. Adjunto imagen más abajo. Para que se entienda mejor, este es mi código.
<section class="introIndex">
<article>
<div class="flexPartIntro">
<p class="parrafoIntro">DisCor ofrece una amplia variedad de productos. Específicamente con
más de 6000 artículos y más
de 40
rubros, entre los cuales, Cerrajería y Accesorios del Automotor.</p>
<img class="imgIntro"src="imagenes/vidrio-espejo.webp" alt="Rubros: DisCor Cerrajería y Accesorios">
<div><a href="views/rubros.html" class="btnIntro">Nuestros Rubros</a></div>
</div>
</article>
</section>
Y en CSS
section article img{
margin-top: 30px;
margin-right: 0px;
/*Tamaño*/
width: 500px;
/* Alinear a la derecha */
}
.ftIntro{
width: 100%;
}
.introIndex{
height: 50vh;
}
.introIndex article p{
margin-top: 30px;
width: 90%;
text-align: center;
}
.introIndex article img{
width: 40%;
}
.flexPartIntro{
height: 50vh;
display: grid;
grid-template-areas:
"parrafo imagen"
"boton imagen"
;
}
.parrafoIntro{
width: 100%;
grid-area: parrafo;
}
.imgIntro{
grid-area: imagen;
}
.flexPartIntro div{
display: flex;
justify-content: center;
}
.btnIntro{
grid-area: boton;
}
.btnIntro{
width: 160px;
height: 3vh;
}
Pero aún así, me toma como si tuviera que ir algo abajo de la imagen. Envío Screenshot
Saludos!!