1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
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 > 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>
|
