---
title: Lineas de Cuadricula
slug: Glossary/Grid_Lines
translation_of: Glossary/Grid_Lines
---
<p>Las<strong> Lineas de Cuadricula </strong>se crean cuando defines las {{glossary("tracks", "Pistas de Cuadricula")}} esto sucede dentro de un contenedor que este usando <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.<br>
En el siguiente ejemplo hay una cuadricula con tres pistas de columna y dos pistas de filas. Esto nos da <strong>4 Lineas de Columnas</strong> y <strong>3 Lineas de Fila</strong>.</p>
<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</pre>
<pre class="brush: css">.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
</pre>
<p>Podemos referenciar a <strong>Las Lineas</strong> de nuestra plantilla usando su numero de linea. De manera izquierda-a-derecha y de arriba-a-abajo; la linea 1 de la columna 1 estará en la izquierda de la cuadricula, la linea 1 de la fila 1 estara al inicio de la cuadricula. Los numeros de lineas siguen el tipo de "<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>" de el documento, por ejemplo, si es de derecha-a-izquierda, la columna 1 estara a la derecha de la cuadricula. La imagen de abajo muestra, en fondo gris los numeros de linea, asumiendo que el "modo de escritura" es de izquierda-a-derecha.</p>
<p><img alt="Diagram showing the grid with lines numbered." src="https://mdn.mozillademos.org/files/14763/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
</div>
<p>Las líneas también se crean en la cuadrícula <em>implícita </em>cuando se crean pistas implícitas para mantener el contenido posicionado fuera de la <em>cuadrícula explícita</em>, sin embargo, estas líneas no se pueden abordar mediante un número.</p>
<h2 id="Ubicar_elementos_en_la_cuadrícula_usando_el_número_de_línea">Ubicar elementos en la cuadrícula usando el número de línea</h2>
<p>Al crear una cuadricula usted puede ubicar los elementos dentro de ésta, usando los numeros de lineas.</p>
<p>En el siguiente ejemplo, el elemento esta posicionado desde la linea de columna 1 hasta la linea de columna 3 y desde la linea de fila 1 hasta la linea de fila 3.</p>
<div id="example_2">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div class="item">Item</div>
</div>
</pre>
<pre class="brush: css">.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
</pre>
<p>{{ EmbedLiveSample('example_2', '500', '250') }}</p>
</div>
<h2 id="Nombrando_las_lineas">Nombrando las lineas</h2>
<p>Las lineas creadas <em>en la cuadricula explicita</em>, pueden ser nombradas, asignándoles un nombre dentro de corchetes antes ó después de la información del tamaño de pistas. Asi podemos utlizar estos nombres como referencia para cada línea en vez de utilizar los numeros de linea.</p>
<div id="example_3">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div class="item">Item</div>
</div>
</pre>
<pre class="brush: css">.wrapper {
display: grid;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
grid-column-start: col1-start;
grid-column-end: col3-start;
grid-row-start: row1-start;
grid-row-end: rows-end;
}
</pre>
<p>{{ EmbedLiveSample('example_3', '500', '250') }}</p>
</div>
<h2 id="Learn_more">Learn more</h2>
<h3 id="Property_reference">Property reference</h3>
<ul>
<li>{{cssxref("grid-template-columns")}}</li>
<li>{{cssxref("grid-template-rows")}}</li>
<li>{{cssxref("grid-column-start")}}</li>
<li>{{cssxref("grid-column-end")}}</li>
<li>{{cssxref("grid-column")}}</li>
<li>{{cssxref("grid-row-start")}}</li>
<li>{{cssxref("grid-row-end")}}</li>
<li>{{cssxref("grid-row")}}</li>
</ul>
<h3 id="Further_reading">Further reading</h3>
<ul>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></em></li>
<li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids, Logical Values and Writing Modes</a></em></li>
<li><a href="https://drafts.csswg.org/css-grid/#grid-line-concept">Definition of Grid Lines in the CSS Grid Layout specification</a></li>
</ul>