1

Estaba mirando la página de W3Schools y me surgió una duda.

Tengo planeado hacer una página que tenga el siguiente formato:

Diseño

Pero mirando la información que da la página, no me queda muy claro como diseñar el tamaño que quiero que tenga la cuadrícula, así como no saber tampoco cómo colocarlas.

Este es el código de la página:

<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The grid-gap Property:</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>
</body>
</html>

Pero por mucho que cambio, elimino o modifico cosas, no doy con lo que quiero conseguir.

He intentado con esto, pero poco he conseguido. Me gustaría modificarlo por medidas en vez de por números, pero tampoco sé cómo hacerlo.

<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 8;
}
.item2 {
	grid-column-start: 2;
    grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>

</div>

</body>
</html>

1 respuesta 1

1

Con la ayuda de grid-template-areas podemos resolverlo de manera cómoda y además bastante visual.

Inicialmente veo un error de concepto muy común. Pensaste que necesitabas 9 celdas para conseguir lo que te propones (12 celdas realmente si contamos la última que ocupa la totalidad del ancho).

1/3, 1/3 + 1/3
1/3, 1/3 + 1/3
1/3, 1/3 + 1/3
1/3 + 1/3 + 1/3

De una manera similar a como harías con una tabla y sus colspan. Pero con grid realmente lo que necesitamos son 5 celdas a las que indicamos lo que deseamos que ocupen:

'uno dos'
'uno tres'
'uno cuatro'
'cinco cinco'

Para realizar esta estructura debemos definir un nombre para cada una de nuestras celdas:

.uno {
    grid-area: uno;
}

.dos {
    grid-area: dos;
}

.tres {
    grid-area: tres;
}

.cuatro {
    grid-area: cuatro;
}

.cinco {
    grid-area: cinco;
}

Y luego ya solo nos quedaría el definir los tamaños de las dos columnas que realmente tenemos:

grid-template-columns: 33% 1fr;//La primera que mida un tercio y la segunda lo que le quede de espacio (2/3 realmente).

Ejemplo:

<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    'uno dos'
    'uno tres'
    'uno cuatro'
    'cinco cinco';
  grid-template-columns: 33% 1fr;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.uno {
    grid-area: uno;
}

.dos {
    grid-area: dos;
}

.tres {
    grid-area: tres;
}

.cuatro {
    grid-area: cuatro;
}

.cinco {
    grid-area: cinco;
}
</style>
</head>
<body>

<h1>The grid-gap Property:</h1>

<div class="grid-container">
  <div class="grid-item uno">1</div>
  <div class="grid-item dos">2</div>
  <div class="grid-item tres">3</div>  
  <div class="grid-item cuatro">4</div>
  <div class="grid-item cinco">5</div>
</div>
</body>
</html>

2
  • Es justo lo que quería, ¡gracias! ¿Hay alguna forma de editarlo con alguna medida? ¿O tiene que ser necesariamente lo que sobre del otro?
    – Lucía
    Commented el 24 ene. 2020 a las 9:09
  • 1
    Podrías darle a la segunda columna la medida que quieras.
    – phpMyGuel
    Commented el 24 ene. 2020 a las 9:10

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.