Propiedad grid-template-rows
La propiedad grid-template-rows establece
el número y el ancho de las filas que
ocupará un elemento en el grid o cuadrícula.
En el valor de la propiedad indicamos el ancho de las filas
en cualquier unidad
de tamaños.
La propiedad se especifica en el elemento padre
y determina el ancho de las filas de los elementos hijos.
Al especificar valores en píxeles en las propiedades,
los tamaños de las filas corresponderán exactamente a ellos.
Si usamos la palabra auto, las filas
llenarán todo el espacio disponible. El uso
de la unidad fr (fracción) significa
que todo el espacio se dividirá
en partes iguales. La ventaja de
fr es su adaptabilidad a
diferentes contenedores o resoluciones de pantalla,
ya que fr simplemente los divide en el número
especificado de fracciones sin estar vinculado a un tamaño exacto en píxeles.
Sintaxis
selector {
grid-template-rows: ancho de fila;
}
Ejemplo
Vamos a establecer el ancho de las filas para nuestros elementos en el grid:
<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: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a darle a la primera y tercera fila un ancho fijo en píxeles, y que la segunda fila llene automáticamente el espacio disponible:
<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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora con la propiedad
grid-template-rows
hagamos que la primera y segunda
fila ocupen una parte del contenedor,
y la tercera fila - tres partes:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Los valores especificados en unidades fr
pueden tener forma fraccionaria. Vamos a
modificar el ejemplo anterior, especificando
para la segunda y tercera fila un ancho
en números fraccionarios:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a usar en la propiedad grid-template-rows
la función repeat(),
que le indicará al contenedor que todas
las tres filas deben tener el mismo ancho:
<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: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora modifiquemos el ejemplo anterior para que a las tres filas iguales se agregue una cuarta, que ocupará dos fracciones del contenedor:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a darles a las dos primeras filas un ancho de una fracción del contenedor, y a las dos últimas filas - de dos fracciones:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora vamos a establecer el ancho de las filas
combinando valores, especificados mediante
la función repeat() y unidades libres fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
También en la función repeat() se puede indicar
el valor auto-fill, que llenará
nuestro contenedor con filas iguales del ancho que necesitemos:
<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;
}
:
Ejemplo
Es muy conveniente junto con auto-fill
indicar la función minmax,
que establece un rango de ancho de filas
desde un valor mínimo hasta un valor máximo.
Si el ancho del contenedor no cabe todas
las filas, algunas de ellas se moverán
a una nueva línea, mientras que las filas en la línea
se distribuirán uniformemente en ella. Modifiquemos
el ejemplo anterior, indicando en él la función minmax:
<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, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Ahora vamos a indicar la propiedad auto-fit,
cuya diferencia con auto-fill radica en que
ajusta la cantidad de filas al
ancho disponible del contenedor, expandiendo o
comprimiéndolas:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
También junto con fr se pueden
usar valores en %, que también determinan
qué parte del contenedor ocupará la fila.
En este caso, primero se calculará el tamaño
de la fila en %, y el espacio libre restante
se dividirá en fracciones:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos a usar juntas las propiedades
grid-template-columns y
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Vamos con las propiedades
grid-template-columns y
grid-template-rows
crear una tabla de nueve celdas, ubicadas
en tres filas. Donde la segunda y tercera fila tendrán el mismo ancho,
y cada columna - un ancho diferente:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ejemplo
Y ahora en la tabla del ejemplo anterior hagamos que la fila superior tenga un ancho de dos fracciones, y la primera columna - de media fracción:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ver también
-
la propiedad
grid-template-columns,
que establece el número y el ancho de las columnas en el grid -
la propiedad
grid-auto-rows,
que establece el número y el ancho de las filas en el grid implícito
