From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/glossary/grid_lines/index.html | 176 ++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/es/glossary/grid_lines/index.html (limited to 'files/es/glossary/grid_lines/index.html') 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 +--- +

Las Lineas de Cuadricula se crean cuando defines las {{glossary("tracks", "Pistas de Cuadricula")}} esto sucede dentro de un contenedor que este usando CSS Grid Layout.
+ En el siguiente ejemplo hay una cuadricula con tres pistas de columna y dos pistas de filas. Esto nos da 4 Lineas de Columnas y 3 Lineas de Fila.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+
+ +

Podemos referenciar a Las Lineas 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 "writing mode" 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.

+ +

Diagram showing the grid with lines numbered.

+
+ +

Las líneas también se crean en la cuadrícula implícita cuando se crean pistas implícitas para mantener el contenido posicionado fuera de la cuadrícula explícita, sin embargo, estas líneas no se pueden abordar mediante un número.

+ +

Ubicar elementos en la cuadrícula usando el número de línea

+ +

Al crear una cuadricula usted puede ubicar los elementos dentro de ésta, usando los numeros de lineas.

+ +

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.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.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;
+}
+
+ +

{{ EmbedLiveSample('example_2', '500', '250') }}

+
+ +

Nombrando las lineas

+ +

Las lineas creadas en la cuadricula explicita, 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.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.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;
+}
+
+ +

{{ EmbedLiveSample('example_3', '500', '250') }}

+
+ +

Learn more

+ +

Property reference

+ + + +

Further reading

+ + -- cgit v1.2.3-54-g00ecf