1

Tengo este html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="contenedor">

        <!-- header -->
        <div class="header">

            <h1>Header</h1>
        </div>


        <!-- contenido -->
      <div class="items">

        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
      </div>
     


      <!-- footer -->
      <div class="footer">

        <h1>Footer</h1>
      </div>
       
    </div>
</body>
</html>

Y tengo este css:

.contenedor{

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20vh,1fr));

    /* grid-template-columns: repeat(3,1fr); */

   grid-template-areas:"header header header header header header"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "items items items items items items"
                        "footer footer footer footer footer footer";
    gap: 1vh;
  
   
}

.header{
    grid-area: header;
    background-color: bisque;
}
.items{

    background-color: aqua;
   grid-area: items;
}
.footer{
    background-color: blue;
    grid-area: footer;
}

Pero me esta haciendo esto: introducir la descripción de la imagen aquí

Yo lo que quiero es un header arriba y un footer abajo y que los items o input abarquen 10 filas. Como logro eso?

1
  • exacto o más bien que los items abarquen 10 filas como esta especificado en el grid-template-areas: Commented el 6 jul. 2020 a las 17:57

1 respuesta 1

0

Ya lo solucione con esta línea:

grid-auto-rows: minmax(20vh, auto);

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.