I got a problem with the height of the childrens elements of .contenedor-elementos-generales
I don't know what to do to fix it.
My main html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<title>Descontrol</title>
</head>
<body>
<div class="layout">
<div class="item-grilla contenedor-carta">
<img src="." alt="" id="imgCarta" class="img-carta">
<div class="contenedor-consola-carta">
<span class="consola-carta" id="textoConsolaCarta">Descripción carta: Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Reprehenderit obcaecati voluptatem eius quibusdam facilis dolores
suscipit id a explicabo laborum.</span>
</div>
</div>
<div class="item-grilla contenedor-consola-personaje">
<span class="consola-personaje" id="textoConsolaPersonaje">Consola: Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Voluptatum, vero nesciunt? Repellendus quos ipsam fugit?</span>
</div>
<div class="item-grilla contenedor-botones-juego">
<div class="boton-juego boton-levantarCarta" id="btnLevantarCarta">
<span>LEVANTAR CARTA</span>
</div>
<div class="boton-juego boton-atacar" id="btnAtacar">
<span>ATACAR</span>
</div>
</div>
<div class="item-grilla encabezado-elementos-generales">
<div class="encabezado-personaje">AVATAR</div>
<div class="encabezado-atributo">ATRIBUTO</div>
<div class="encabezado-estado">ESTADO</div>
</div>
<div class="item-grilla contenedor-elementos-generales">
<div class="elemento-general contenedor-personaje">
<img src="img/vida.png" alt="" id="imgPersonaje" class="img-personaje">
</div>
<div class="elemento-general contenedor-atributo">
<div class="atributo">
<img src="img/ataque.png" alt="" class="img-atributo">
<span class="text-atributo">0</span>
</div>
<div class="atributo">
<img src="img/esquiva.png" alt="" class="img-atributo">
<span class="text-atributo">0</span>
</div>
<div class="atributo">
<img src="img/velocidad.png" alt="" class="img-atributo">
<span class="text-atributo">0</span>
</div>
<div class="atributo">
<img src="img/vida.png" alt="" class="img-atributo">
<span class="text-atributo">0</span>
</div>
<div class="atributo">
<img src="img/vida.png" alt="" class="img-atributo">
<span class="text-atributo">0</span>
</div>
</div>
<div class="elemento-general contenedor-estado">
<img src="img/vida.png" alt="" class="img-estado" id="imgEstado">
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
My css file:
* {
all: initial;
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
}
body {
font-size: 0.9rem;
font-family: Titillium Web;
}
.layout {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(9, 1fr);
outline: 1.5px solid #000;
}
.contenedor-carta {
grid-column: 1/10;
grid-row: 1/12;
background: #000;
display: flex;
flex-direction: column;
}
.img-carta {
height: calc((6/11)*100%);
}
.contenedor-consola-carta {
height: calc((5/11)*100%);
color: #fff;
display: flex;
justify-content: center;
text-align: center;
}
.consola-carta {
padding: 0 20px;
padding-top: 50px;
text-align: center;
}
.contenedor-consola-personaje {
grid-column: 1/10;
grid-row: 12/15;
display: flex;
align-items: center;
justify-content: center;
}
.consola-personaje {
text-align: center;
padding: 30px;
}
.contenedor-botones-juego {
grid-column: 1/10;
grid-row: 15/16;
display: flex;
align-items: center;
}
.boton-juego {
border-top: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 100%;
}
.boton-juego.boton-levantarCarta {
border-right: 1px solid #000;
}
.encabezado-elementos-generales {
grid-column: 1/10;
grid-row: 16/17;
display: grid;
grid-template-columns: repeat(9, 1fr);
background: #000;
color: #fff;
}
.encabezado-personaje,
.encabezado-atributo,
.encabezado-estado {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.encabezado-personaje {
grid-column: 1/ span 2;
}
.encabezado-atributo {
grid-column: 3 / span 5;
}
.encabezado-estado {
grid-column: 8 / span 2;
}
.encabezado-elementos-generales * {
text-align: center;
}
.contenedor-elementos-generales {
grid-column: 1/10;
grid-row: 17/-1;
display: grid;
grid-template-columns: repeat(9, 1fr);
height: 100%;
}
.contenedor-personaje {
grid-column: 1/3;
background: #000;
border: 1px solid #fff;
}
.contenedor-atributo {
grid-column: 3/8;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
background: #000;
}
.atributo {
margin: 0 1px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
}
.img-atributo {
border: 1px solid #fff;
height: 50%;
background: #fff;
}
.text-atributo {
margin-top: 2px;
height: 50%;
background: #fff;
text-align: center;
}
.contenedor-estado {
grid-column: 8/-1;
background: #000;
border: 1px solid #fff;
}
@media only screen and (min-width: 600px) {
body {
display: flex;
justify-content: center;
}
.layout {
width: 60vw;
}
}
@media only screen and (min-width: 700px) {
body {
display: flex;
justify-content: center;
}
.layout {
width: 40vw;
}
}
The .layout element is suppost to be a grid 9x18 that matches the dimension of the any window, which does it, the problem is the height of the element .contenedor-personaje, contenedor-atributo and .contenedor-estado.
If you found another mistake or have a suggestion, please be free to tell I'm still a begginer in web desing.
Navegator: Chrome
OS: Ubuntu 20.04