initial commit

1 files changed, 176 insertions, 0 deletions

diff --git a/files/es/glossary/grid_lines/index.html b/files/es/glossary/grid_lines/index.html
new file mode 100644
index 0000000000..f908009fb3
--- /dev/null
+++ b/files/es/glossary/grid_lines/index.html
@@ -0,0 +1,176 @@
+---
+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 &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</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 &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</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 &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</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>