Elementos hijos (Items)
De forma predeterminada, un contenedor tiene un elemento de cuadrícula para cada columna, en cada fila, pero puede diseñar los elementos de cuadrícula para que abarquen varias columnas o filas.
La propiedad grid-column
La propiedad grid-column define en qué columna(s) colocar un elemento. Tú defines dónde comenzará el elemento y dónde terminará.
Nota: La propiedad grid-column es una propiedad abreviada para las propiedades grid-column-start y grid-column-end.
Para colocar un elemento, puede hacer referencia a los números de línea o usar la palabra clave “span” para definir cuántas columnas abarcará el elemento.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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-column: 1 / 5;
}
</style>
</head>
<body>
<h1>Usando la propiedad grid-column</h1>
<p>Utiliza la propiedad <em>grid-column</em> para
especificar dónde colocar un elemento.</p>
<p>El elemento 1 comenzará en la columna 1 y
terminará antes de la columna 5:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>
</body>
</html>
El ejm quedaría de la siguiente manera.
Ejm
Haz que “elemento1” comience en la columna 1 y abarque 3 columnas:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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-column: 1 / span 3;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column-line 1 and span 3 columns:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
Ejm
Haz que “elemento1” comience en la columna 2 y abarque 3 columnas:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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;
}
.item2 {
grid-column: 2 / span 3;
}
</style>
</head>
<body>
<h1>The grid-column Property</h1>
<p>Use the <em>grid-column</em> property to
specify where to place an item.</p>
<p>Item2 will start on column line 2 and
span 3 columns:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
La propiedad grid-row
La propiedad grid-row define en qué fila colocar un elemento. Tú defines dónde comenzará el elemento y dónde terminará.
Nota: La propiedad grid-row es una propiedad abreviada para las propiedades grid-row-start y grid-row-end.
Para colocar un artículo, puedes hacer referencia a los números de línea o usar la palabra clave “span” para definir cuántas filas abarcará el artículo.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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: 1 / 4;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<p>Use the <em>grid-row</em> property to specify
where to place an item.</p>
<p>Item1 will start on row-line 1 and end on
row-line 4:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
</div>
</body>
</html>
Ejm
Haz que el “elemento 1” comience en la fila 1 y abarque 2 filas:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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: 1 / span 2;
}
</style>
</head>
<body>
<h1>The grid-row Property</h1>
<p>Use the <em>grid-row</em> property to
specify where to place an item.</p>
<p>Item1 will start on row 1 and span
2 rows:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
<div class="item16">16</div>
<div class="item17">17</div>
</div>
</body>
</html>
La propiedad grid-area
La propiedad grid-area se puede utilizar como una propiedad abreviada para las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end.
Ejm
Haga que “elemento 8” comience en la línea de fila 1 y la línea de columna 2, y termine en la línea de fila 5 y la línea de columna 6:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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;
}
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property to
specify where to place an item.</p>
<p>The syntax is:</p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>
<p>Item8 will start on row-line 1 and column-line 2,
and end on row-line 5 column-line 6:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
<div class="item14">14</div>
<div class="item15">15</div>
</div>
</body>
</html>
Ejm
Haz que “elemento 8” comience en la línea de fila 2 y en la línea de columna 1, y abarque 2 filas y 3 columnas:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
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;
}
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property to
specify where to place an item.</p>
<p>The syntax is grid-row-start / grid-column-start
/ grid-row-end / grid-column-end.</p>
<p>Item8 will start on row-line 2 and column-line 1,
and span 2 rows and 3 columns:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
</div>
</body>
</html>
Nombrar items Grid
La propiedad grid-area también se puede utilizar para asignar nombres a los elementos de la cuadrícula.
Ejm
Item1 recibe el nombre “myArea” y abarca las cinco columnas en un diseño de cuadrícula de cinco columnas:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
gap: 10px;
background-color: #2196f3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>La propiedad grid-area</h1>
<p>Puede usar la propiedad <em>grid-area</em> para
nombrar los elementos de la cuadrícula.</p>
<p>Puede hacer referencia al nombre cuando configure
el diseño de la cuadrícula, utilizando la propiedad
<em>grid-template-areas</em> en el contenedor de
la cuadrícula.</p>
<p>Item1, se llama "myArea" y ocupará el lugar de
las cinco columnas:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Cada fila está definida por apóstrofes (‘ ‘). Las columnas de cada fila se definen dentro de los apóstrofes, separadas por un espacio.
Nota: un signo de punto representa un elemento de cuadrícula sin nombre.
Ejm
Deja que “myArea” abarque dos columnas en un diseño de cuadrícula de cinco columnas (los signos de punto representan elementos sin nombre):
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
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;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property to
name grid items.</p>
<p>You can refer to the name when you set up the
grid layout, by using the
<em>grid-template-areas</em> property on the grid container.</p>
<p>Item1, is called "myArea" and will take up the
place of two columns (out of five):</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
Para definir dos filas, define la columna de la segunda fila dentro de otro conjunto de apóstrofes:
Ejm
Haz que “item1” abarque dos columnas y dos filas:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
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;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property to name grid items.</p>
<p>You can refer to the name when you set up the grid
layout, by using the
<em>grid-template-areas</em> property on the grid container.</p>
<p>Item1, is called "myArea" and will take up the place
of two columns (out of five), and will span two rows:</p>
<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 class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Ejm
Asigna un nombre a todos los elementos y cree una plantilla de página web lista para usar:
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
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;
}
</style>
</head>
<body>
<h1>The grid-area Property</h1>
<p>You can use the <em>grid-area</em> property
to name grid items.</p>
<p>You can refer to the name when you set up the
grid layout, by using the
<em>grid-template-areas</em> property on the grid container.</p>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
El orden de los items
El diseño de cuadrícula nos permite colocar los elementos en cualquier lugar que deseemos. El primer elemento del código HTML no tiene que aparecer como el primer elemento de la cuadrícula.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
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-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>
<h1>Sort the Items</h1>
<p>The grid items do not have to be displayed in the
same order as they are written in the HTML code.</p>
<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 class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Puedes reorganizar el orden para ciertos tamaños de pantalla mediante consultas de medios (media queries):
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
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;
}
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
</head>
<body>
<h1>Re-arange the Order on Small Devices</h1>
<p>Resize the window to 500 pixels see the effect.</p>
<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 class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>