Cantidad y ancho de filas en cuadrículas CSS
Los elementos de la cuadrícula también se pueden colocar
en filas. Para esto está destinada la
propiedad grid-template-rows.
Esta propiedad acepta los tamaños de las filas
separados por espacios. En ella se pueden aplicar
los mismos valores que estudiamos
para las columnas.
Ejemplo
Como ejemplo, coloquemos los bloques en cuatro filas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Establezcamos para la primera y tercera fila un ancho fijo en píxeles, y que la segunda fila ocupe el espacio restante:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Usemos la función repeat
para especificar los tamaños de las filas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Asignemos a las filas una altura de 50px,
y establezcamos la cantidad de filas
automáticamente usando
el valor auto-fill:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tareas prácticas
Coloque los bloques en tres filas.
Que el primer bloque tenga
un tamaño de 100px,
el segundo de 150px,
y el tercero de 200px.
Que haya tres filas en su cuadrícula. Haga que tengan el mismo ancho.
