Estaba mirando la página de W3Schools y me surgió una duda.
Tengo planeado hacer una página que tenga el siguiente formato:
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>