diff options
Diffstat (limited to 'files/es/web/css/css_grid_layout')
7 files changed, 3697 insertions, 0 deletions
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..3b0aac0c26 --- /dev/null +++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: Colocación automática en diseño de cuadrícula CSS +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p><span class="notranslate">Además de la capacidad de colocar elementos con precisión en una cuadrícula creada, la especificación de diseño de cuadrícula CSS contiene reglas que controlan lo que sucede cuando crea una cuadrícula y no coloca algunos o todos los elementos secundarios.</span> <span class="notranslate"> Puede ver la colocación automática en acción de la manera más simple creando una cuadrícula en un conjunto de elementos.</span> <span class="notranslate"> Si no proporciona información de ubicación a los elementos, se colocarán en la cuadrícula, uno en cada celda de la cuadrícula.</span></p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Reglas_predeterminadas_para_la_colocación_automática"><span class="notranslate">Reglas predeterminadas para la colocación automática</span></h2> + +<p><span class="notranslate">Como puede ver con el ejemplo anterior, si crea una cuadrícula, todos los elementos secundarios se colocarán uno en cada celda de la cuadrícula.</span> <span class="notranslate"> El flujo predeterminado es organizar los elementos por fila.</span> <span class="notranslate"> La cuadrícula colocará un elemento en cada celda de la fila 1. Si ha creado filas adicionales utilizando la propiedad <code>grid-template-rows</code> , entonces grid continuará colocando elementos en estas filas.</span> <span class="notranslate"> Si la cuadrícula no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas <em>implícitas</em> .</span></p> + +<h3 id="Dimensionar_filas_en_la_cuadrícula_implícita"><span class="notranslate">Dimensionar filas en la cuadrícula implícita</span></h3> + +<p><span class="notranslate">El valor predeterminado para las filas creadas automáticamente en la cuadrícula implícita es que tengan el tamaño automático.</span> <span class="notranslate"> Esto significa que contendrán el contenido agregado a ellos sin causar un desbordamiento.</span></p> + +<p><span class="notranslate">Sin embargo, puede controlar el tamaño de estas filas con la propiedad <code>grid-auto-rows</code> .</span> <span class="notranslate"> Para hacer que todas las filas creadas tengan 100 píxeles de alto, por ejemplo, usaría:</span></p> + + + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/minmax&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjUmn8CALnPlLGqwXvXDDpfMu0Tww" title="La documentación sobre esto aún no se ha escrito; por favor considere contribuir!"><code>minmax()</code></a> en su valor para <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.</span></p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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 + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p><span class="notranslate">También puede pasar una lista de pistas, esto se repetirá.</span> <span class="notranslate"> La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como <code>200px</code> píxeles.</span> <span class="notranslate"> Esto continuará mientras se agregue contenido a la cuadrícula implícita.</span> <span class="notranslate"> <strong>Las listas de seguimiento no son compatibles con Firefox.</strong></span></p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Colocación_automática_por_columna"><span class="notranslate">Colocación automática por columna</span></h3> + +<p><span class="notranslate">También puede pedirle a la cuadrícula que coloque automáticamente los elementos por columna.</span> <span class="notranslate"> Usando la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor de <code>column</code> .</span> <span class="notranslate"> En este caso, la cuadrícula agregará elementos en las filas que haya definido utilizando <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiibrTdo1Q-C-swZP-9Hj4FqNhSYA" title="La propiedad CSS grid-template-rows define los nombres de línea y las funciones de tamaño de seguimiento de las filas de la cuadrícula."><code>grid-template-rows</code></a> .</span> <span class="notranslate"> Cuando llena una columna, se moverá a la siguiente columna explícita o creará una nueva pista de columna en la cuadrícula implícita.</span> <span class="notranslate"> Al igual que con las pistas de fila implícitas, estas pistas de columna tendrán el tamaño automático.</span> <span class="notranslate"> Puede controlar el tamaño de las pistas de columna implícitas con <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhisTQnhckNG69vB3s3mdkckl3PnrQ" title="La propiedad CSS grid-auto-columnas especifica el tamaño de una pista de columna de cuadrícula creada implícitamente."><code>grid-auto-columns</code></a> , esto funciona de la misma manera que <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> .</span></p> + +<p><span class="notranslate">En el siguiente ejemplo, he creado una cuadrícula con tres pistas de fila de 200 píxeles de altura.</span> <span class="notranslate"> Estoy colocando automáticamente por columna y las columnas creadas tendrán un ancho de columna de 300 píxeles, luego un ancho de columna de 100 píxeles hasta que haya suficientes pistas de columna para contener todos los elementos.</span></p> + + + +<div id="placement_5"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="El_orden_de_los_artículos_colocados_automáticamente"><span class="notranslate">El orden de los artículos colocados automáticamente</span></h2> + +<p><span class="notranslate">Una cuadrícula puede contener una mezcla de elementos.</span> <span class="notranslate"> Algunos de los elementos pueden tener una posición en la cuadrícula, pero otros pueden colocarse automáticamente.</span> <span class="notranslate"> Esto puede ser útil, si tiene un orden de documentos que refleja el orden en que los elementos se ubican en la cuadrícula, es posible que no necesite escribir reglas CSS para colocar absolutamente todo.</span> <span class="notranslate"> La especificación contiene una sección larga que detalla el <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://drafts.csswg.org/css-grid/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">algoritmo de colocación de elementos de</a> la <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://drafts.csswg.org/css-grid/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">cuadrícula</a> , sin embargo, para la mayoría de nosotros solo necesitamos recordar algunas reglas simples para nuestros elementos.</span></p> + +<h3 id="Pedido_de_documentos_modificados"><span class="notranslate">Pedido de documentos modificados</span></h3> + +<p><span class="notranslate">La cuadrícula coloca los elementos a los que no se les ha asignado una posición de cuadrícula en lo que se describe en la especificación como "orden de documento modificado de orden".</span> <span class="notranslate"> Esto significa que si ha utilizado la propiedad del <code>order</code> , los artículos se colocarán por ese orden, no por su orden DOM.</span> <span class="notranslate"> De lo contrario, permanecerán de forma predeterminada en el orden en que se ingresan en el origen del documento.</span></p> + +<h3 id="Artículos_con_propiedades_de_colocación"><span class="notranslate">Artículos con propiedades de colocación</span></h3> + +<p><span class="notranslate">Lo primero que hará la cuadrícula es colocar cualquier elemento que tenga una posición.</span> <span class="notranslate"> En el siguiente ejemplo, tengo 12 elementos de cuadrícula.</span> <span class="notranslate"> El elemento 2 y el elemento 5 se han colocado utilizando una colocación basada en líneas en la cuadrícula.</span> <span class="notranslate"> Puede ver cómo se colocan esos elementos y luego los otros elementos se colocan automáticamente en los espacios.</span> <span class="notranslate"> Los artículos colocados automáticamente se colocarán antes de los artículos colocados en orden DOM, no comienzan después de la posición de un artículo colocado que viene antes que ellos.</span></p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Maneja_artículos_que_abarcan_pistas"><span class="notranslate">Maneja artículos que abarcan pistas</span></h3> + +<p><span class="notranslate">Puede usar las propiedades de ubicación sin dejar de aprovechar la colocación automática.</span> <span class="notranslate"> En el siguiente ejemplo, he agregado al diseño configurando elementos impares para abarcar dos pistas tanto para filas como para columnas.</span> <span class="notranslate"> Hago esto con las propiedades <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiTUP0c3kBpxu_o_84hDEyxHQeuuA" title="La propiedad CSS de fin de columna de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la columna de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde del extremo del bloque de su área de cuadrícula."><code>grid-column-end</code></a> y <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiMYehNwPR_y2q7E_32YoeGI3FJ8w" title="La propiedad CSS de fin de fila de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la fila de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde final en línea de su área de cuadrícula."><code>grid-row-end</code></a> y establezco el valor de esto para <code>span 2</code> .</span> <span class="notranslate"> Lo que esto significa es que la línea de inicio del artículo se establecerá mediante la colocación automática, y la línea final abarcará dos pistas.</span></p> + +<p><span class="notranslate">Puede ver cómo esto deja huecos en la cuadrícula, en cuanto a los elementos colocados automáticamente si la cuadrícula se encuentra con un elemento que no cabe en una pista, se moverá a la siguiente fila hasta que encuentre un espacio que el elemento pueda caber en.</span></p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Llenando_los_huecos"><span class="notranslate">Llenando los huecos</span></h3> + +<p><span class="notranslate">Hasta ahora, aparte de los elementos que hemos colocado específicamente, la cuadrícula siempre avanza y mantiene los elementos en orden DOM.</span> <span class="notranslate"> En general, esto es lo que desea, si está diseñando un formulario, por ejemplo, no desea que las etiquetas y los campos se mezclen para llenar un vacío.</span> <span class="notranslate"> Sin embargo, a veces, estamos diseñando cosas que no tienen un orden lógico y nos gustaría crear un diseño que no tenga huecos.</span></p> + +<p><span class="notranslate">Para hacer esto, agregue la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor <code>dense</code> al contenedor.</span> <span class="notranslate"> Esta es la misma propiedad que usa para cambiar el orden de flujo a <code>column</code> , por lo que si estuviera trabajando en columnas agregaría ambos valores <code>grid-auto-flow: column dense</code> .</span></p> + +<p><span class="notranslate">Una vez hecho esto, la grilla ahora rellenará los huecos, a medida que se mueva a través de la grilla, deja huecos como antes, pero luego, si encuentra un elemento que se ajuste a un hueco anterior, lo recogerá y lo sacará del orden DOM para colóquelo en la brecha.</span> <span class="notranslate"> Al igual que con cualquier otro reordenamiento en la cuadrícula, esto no cambia el orden lógico.</span> <span class="notranslate"> El orden de tabulación, por ejemplo, seguirá el orden del documento.</span> <span class="notranslate"> Examinaremos los posibles problemas de accesibilidad de Grid Layout en una guía posterior, pero debe tener cuidado al crear esta desconexión entre el orden visual y el orden de visualización.</span></p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Elementos_de_cuadrícula_anónimos"><span class="notranslate">Elementos de cuadrícula anónimos</span></h3> + +<p><span class="notranslate">Hay una mención en la especificación de elementos de cuadrícula anónimos.</span> <span class="notranslate"> Estos se crean si tiene una cadena de texto dentro de su contenedor de cuadrícula, que no está envuelta en ningún otro elemento.</span> <span class="notranslate"> En el siguiente ejemplo, tenemos tres elementos de cuadrícula, suponiendo que haya configurado el padre con una clase de <code>grid</code> para <code>display: grid</code> .</span> <span class="notranslate"> El primero es un elemento anónimo, ya que no tiene un marcado adjunto, este elemento siempre se tratará a través de las reglas de colocación automática.</span> <span class="notranslate"> Los otros dos son elementos de cuadrícula encerrados en un div, pueden colocarse automáticamente o puede colocarlos con un método de posicionamiento en su cuadrícula.</span></p> + +<pre class="brush: css"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p><span class="notranslate">Los elementos anónimos siempre se colocan automáticamente porque no hay forma de orientarlos.</span> <span class="notranslate"> Por lo tanto, si tiene algún texto sin envolver por alguna razón en su cuadrícula, tenga en cuenta que puede aparecer en algún lugar inesperado, ya que se colocará automáticamente de acuerdo con las reglas de colocación automática.</span></p> + +<h3 id="Casos_de_uso_para_la_colocación_automática"><span class="notranslate">Casos de uso para la colocación automática</span></h3> + +<p><span class="notranslate">La colocación automática es útil siempre que tenga una colección de artículos.</span> <span class="notranslate"> Pueden ser elementos que no tienen un orden lógico, como una galería de fotos o una lista de productos.</span> <span class="notranslate"> En ese caso, puede optar por utilizar el modo de embalaje denso para rellenar los agujeros en su cuadrícula.</span> <span class="notranslate"> En mi ejemplo de galería de imágenes tengo algunas imágenes de paisajes y algunas de retratos.</span> <span class="notranslate"> He configurado imágenes de paisajes, con una clase de <code>landscape</code> para abarcar dos pistas de columna.</span> <span class="notranslate"> Luego uso <code>grid-auto-flow: dense</code> para crear una grilla densamente empaquetada.</span></p> + +<div id="placement_9"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p><span class="notranslate">La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico.</span> <span class="notranslate"> Un ejemplo es la lista de definiciones en el siguiente ejemplo.</span> <span class="notranslate"> Las listas de definición son un desafío interesante para el estilo, ya que son planas, no hay nada que envuelva los grupos de elementos <code>dt</code> y <code>dd</code> .</span> <span class="notranslate"> En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un <code>dt</code> en la columna 1, y <code>dd</code> en la columna 2, esto garantiza que los términos vayan de un lado y las definiciones del otro, sin importar cuántos de cada uno que tenemos.</span></p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="¿Qué_no_podemos_hacer_con_la_colocación_automática_todavía"><span class="notranslate">¿Qué no podemos hacer con la colocación automática (todavía)?</span></h2> + +<p><span class="notranslate">Hay un par de cosas que a menudo surgen como preguntas.</span> <span class="notranslate"> Actualmente no podemos hacer cosas como apuntar a cualquier otra celda de la cuadrícula con nuestros artículos.</span> <span class="notranslate"> Es posible que ya se le haya ocurrido un problema relacionado si siguió la última guía sobre líneas con nombre en la cuadrícula.</span> <span class="notranslate"> Sería definir una regla que dijera "colocar elementos automáticamente en la siguiente línea llamada" n ", y la cuadrícula se saltaría otras líneas. Se plantea <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://github.com/w3c/csswg-drafts/issues/796&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhi1X-T_53Yxbg3lSUNap9U7hwWSnQ" rel="noopener">un problema al respecto</a> en el repositorio CSSWG GitHub, y sería bienvenido a agregue sus propios casos de uso a esto.</span></p> + +<p><span class="notranslate">Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula.</span> <span class="notranslate"> Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso.</span> <span class="notranslate"> Esto ayudará a mejorar las futuras versiones de la especificación.</span></p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..445cbac308 --- /dev/null +++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,703 @@ +--- +title: Box alignment in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +<p>Si estás familiarizado con <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> Entonces ya habrás encontrado la forma en que los items flexibles pueden ser alineados correctamente dentro de un contendor flex. Estas propiedades de alineación que encontramos por primera vez en la especificación de flexbox se han trasladado a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esta especificación tiene detalles de cómo debería funcionar la alineación en todos los diferentes métodos de diseño.</p> + +<p>Cada método de diseño que implemente Box Alignment tendrá algunas diferencias debido a que cada método tiene características y restricciones diferentes (y acciones heredadas), por lo que es imposible hacer la alineación exactamente de la misma forma en todos los ámbitos. La especificación Box Alignment tiene detalles para cada método, sin embargo, te decepcionaría si intentaras alinear en muchos métodos en este momento, pues el soporte aún no está disponible para todos los navegadores. Donde sí tenemos soporte de navegador para las propiedades de alineación y distribución de espacio de la especificación Box Alignment es en grid layout.</p> + +<p><span class="seoSummary">Esta guía muestra la forma cómo funciona la alineación de cajas (box alignment) en el diseño de cuadriculas (Grid Layout). Verás mucha similitud en cómo funcionan estás propiedades y valores en flexbox.</span> Debido a que la cuadrícula (grid) es bidimensional y flexbox es unidimensional, existen algunas pequeñas diferencias con las que debes tener cuidado. Así que comenzaremos mirando los dos ejes con los que tratamos cuando alineamos cosas en una cuadricula.</p> + +<h2 id="Los_2_ejes_de_un_diseño_Grid">Los 2 ejes de un diseño Grid</h2> + +<p>Al trabajar con el diseño de cuadrícula, tienes dos ejes disponibles para alinear las cosas: el eje del bloque (block axis) y el eje en línea (inline axis). El eje de bloque es el eje sobre el cual se disponen los bloques en el diseño del bloque. Si tienes dos párrafos en tu página, se mostrara uno debajo del otro, entonces es ésta la dirección que describimos como el eje de bloque (también llamadas columnas, eje "y", eje vertical).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15963/Block_Axis.png" style="height: 306px; width: 940px;"></p> + +<p>El eje en línea (inline axis) se ejecuta a través del eje del bloque, es la dirección en la que se ejecuta el texto en el flujo regular en línea (también llamadas filas, Eje "x", eje horizontal). </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> + +<p>Podemos alinear el contenido dentro de las áreas de la cuadrícula o rejilla , y los tracks en estos dos ejes.</p> + +<h2 id="Alineación_de_elementos_en_el_Eje_de_Bloque">Alineación de elementos en el Eje de Bloque </h2> + +<p>Las propiedades {{cssxref("align-self")}} y {{cssxref("align-items")}} controlan la alineación en el eje de bloque. Cuando usamos estas propiedades, estamos cambiando la alineación del elemento dentro del área de la cuadricula (grid) que se ha colocado.</p> + +<p>En el siguiente ejemplo, tengo 4 áreas dentro de mi cuadricula (grid). Puedo usar la propiedad {{cssxref("align-items")}} en el contenedor de la cuadricula (grid container), para alinear los elementos usando uno de los siguientes valores:</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<div id="alignment_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; + align-items: start; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p> +</div> + +<p>Ten en mente que una vez establezcas <code>align-self: start</code>, la altura de cada hijo <code><div></code> será determinada por el contenido del <code><div></code>. Esto está en contraste de omitir <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a></code> completamente, en el cual la altura de cada <code><div></code> se extendería hasta llenar el área de la cuadricula.</p> + +<p>La propiedad {{cssxref("align-items")}} establece la propiedad {{cssxref("align-self")}} para todos los elementos hijos de la cuadricula. Esto significa que puedes establecer la propiedad individualmente, usando <code>align-self</code> en cada elemento de la cuadricula.</p> + +<p>En el siguiente ejemplo, estoy usando la propiedad <code>align-self</code> para demostrar los diferentes valores de alineación. La primer área está mostrando la acción por defecto de <code>align-self</code>, el cual es extenderse. El segundo elemento tiene un valor en <code>align-self</code> de <code>start</code>, el tercero <code>end</code> y el cuarto <code>center</code>.</p> + +<div id="alignment_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + align-self: start; +} +.item3 { + grid-area: c; + align-self: end; +} +.item4 { + grid-area: d; + align-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p> +</div> + +<h3 id="Elementos_con_una_relación_de_aspecto_intrínseco">Elementos con una relación de aspecto intrínseco</h3> + +<p>La especificación determina que la acción por defecto en {{cssxref("align-self")}} es estirarse, excepto para los elementos que tienen una relación de aspecto intrínseco, en este caso ellos funcionan como <code>start</code>. La razón para esto, es que si elemento con una relación de aspecto intrínseco es establecido para estirarse, este por defecto pueda distorsionarlo.</p> + +<p>Esta acción ahora ha sido clarificada en la especificación, con navegadores aún hay que implementar la acción correcta. Hasta que eso pase, te puedes asegurar de que los elementos no se extiendan, como en imagenes, las cuales son hijos directos de la cuadricula, estableciendo {{cssxref("align-self")}} y {{cssxref("justify-self")}} al empezar. Esto se asemejará a la acción correcta una vez implementado.</p> + +<h2 id="Justifying_Items_on_the_Inline_Axis">Justifying Items on the Inline Axis</h2> + +<p>As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for <code>align-self</code>.</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.</p> + +<p>Once again the default is <code>stretch</code>, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:</p> + +<div id="alignment_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + justify-self: start; +} +.item3 { + grid-area: c; + justify-self: end; +} +.item4 { + grid-area: d; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p> +</div> + +<p>As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.</p> + +<p>The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.</p> + +<h2 id="Center_an_item_in_the_area">Center an item in the area</h2> + +<p>By combining the align and justify properties we can easily center an item inside a grid area.</p> + +<div id="alignment_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + grid-auto-rows: 200px; + grid-template-areas: + ". a a ." + ". a a ."; +} +.item1 { + grid-area: a; + align-self: center; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p> +</div> + +<h2 id="Aligning_the_grid_tracks_on_the_block_axis">Aligning the grid tracks on the block axis</h2> + +<p>If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The values for {{cssxref("align-content")}} and {{cssxref("justify-content")}} are:</p> + +<ul> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.</p> + +<p>The <code>align-content</code> property is applied to the grid container as it works on the entire grid. The default behavior in grid layout is <code>start</code>, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:</p> + +<div id="alignment_5"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p> + +<p>If I add <code>align-content</code> to my container, with a value of <code>end</code>, the tracks all move to the end line of the grid container in the block dimension:</p> +</div> + +<div id="alignment_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: end; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p> +</div> + +<p>We can also use values for this property that you may be familiar with from flexbox; the space distribution values of <code>space-between</code>, <code>space-around</code> and <code>space-evenly</code>. If we update {{cssxref("align-content")}} to <code>space-between</code>, you can see how the elements on our grid space out:</p> + +<div id="alignment_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p> +</div> + +<p>It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.</p> + +<p>In the below image I have placed the grid with <code>align-content</code>, with a value of <code>start</code> alongside the grid when <code>align-content</code> has a value of <code>space-between</code>. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:</p> + +<p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> + +<h2 id="Justifying_the_grid_tracks_on_the_row_axis">Justifying the grid tracks on the row axis</h2> + +<p>On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.</p> + +<p>Using the same example, I am setting {{cssxref("justify-content")}} to <code>space-around</code>. This once again causes tracks which span more than one column track to gain extra space:</p> + +<div id="alignment_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; + justify-content: space-around; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p> +</div> + +<h2 id="Alignment_and_auto_margins">Alignment and auto margins</h2> + +<p>Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to <code>auto</code>, you know that an auto margin absorbs all of the available space. By setting the margin to <code>auto</code> on both sides, it pushes the block into the middle as both margins attempt to take all of the space.</p> + +<p>In this next example, I have given item 1 a left margin of <code>auto</code>. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:</p> + +<div id="alignment_9"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; + margin-left: auto; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p> +</div> + +<p>You can see how the item is aligned by using the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>:</p> + +<p><img alt="Image showing auto-margins using the Grid Highlighter." src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> + +<h2 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h2> + +<p>In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.</p> + +<p>CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of <code>justify-content: start</code> would be for grid tracks to start on the right hand side of the grid.</p> + +<p>Setting auto margins, using <code>margin-right</code> or <code>margin-left</code> however, or absolutely positioning items using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<p><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.</p> + +<h2 id="¿Qué_es_una_cuadrículagrid">¿Qué es una cuadrícula(grid)?</h2> + +<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:</p> + +<h3 id="Tamaños_fijos_y_flexibles">Tamaños fijos y flexibles</h3> + +<p>Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida <code>fr</code> (fracción), diseñada para este propósito.</p> + +<h3 id="Posicionamiento_de_elementos">Posicionamiento de elementos</h3> + +<p>Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.</p> + +<h3 id="Creación_de_líneas_adicionales_para_alojar_contenido">Creación de líneas adicionales para alojar contenido</h3> + +<p>Usted puede definir una cuadrícula explícita con grid layout. La especificación Grid Layout es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.</p> + +<h3 id="Control_de_alineación">Control de alineación</h3> + +<p>Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.</p> + +<h3 id="Control_de_contenido_superpuesto">Control de contenido superpuesto</h3> + +<p>Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.</p> + +<p>Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su <strong>contenedor de cuadrícula</strong>.</p> + +<h2 id="El_contenedor_de_Grid_2">El contenedor de Grid</h2> + +<p>Creamos un <em>contenedor de cuadrícula</em> al declarar <code>display: grid</code> o <code>display: inline-grid</code> en un elemento. Tan pronto como hagamos esto todos los <em>hijos directos</em> de ese elemento se convertirán en <em>elementos de la cuadrícula.</em></p> + +<p>En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.</p> + +<div id="El_contenedor_de_Grid"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>Hago de <code>.wrapper</code> un contenedor de cuadrícula.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}</p> +</div> + +<p>Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual tiene disponible el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor <code>grid</code>. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.</p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.</p> + +<p>Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.</p> + +<h2 id="Vias_filas_y_columnas_del_Grid">Vias, filas y columnas del Grid</h2> + +<p>Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada - esta es la vía de la primera fila en nuestra cuadrícula.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>Puedo modificar nuestro ejemplo anterior al agregar la propiedad <code>grid-template-columns</code>, para así definir el tamaño (ancho) de las vías de cada columna.</p> + +<p>Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.</p> + +<div id="grid_first"> +<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: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="La_Unidad_fr_2">La Unidad fr</h3> + +<p>Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.</p> + +<div id="La_Unidad_fr"> +<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: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +</pre> +</div> + +<p>{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}</p> +</div> + +<p>En el próximo ejemplo creamos una definición con una vía de <code>2fr</code> y luego dos vías de <code>1fr</code>. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía y una parte a cada una de las dos vias restantes.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Listando_vías_con_la_notación_repeat">Listando vías con la notación <code>repeat()</code></h3> + +<p>Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación <code>repeat()</code> con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>También puede ser escrita así:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de <code>1fr</code> y luego una vía final de 20 píxeles.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía <code>1fr</code> seguida por una vía <code>2fr</code>, repetida cinco veces.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3> + +<p>Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.</p> + +<p>Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.</p> + +<p>También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.</p> + +<p>En el siguiente ejemplo usamos <code>grid-auto-rows</code> para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.</p> + +<div class="brush: html" id="rejilla_implícita_y_explícita"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}</p> +</div> + +<h3 id="Tamaño_de_vía_y_minmax_2">Tamaño de vía y <code>minmax()</code></h3> + +<p>Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.</p> + +<p>Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando <code>minmax()</code> en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.</p> + +<div id="Tamaño_de_vía_y_minmax"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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 + <p>I have some more content in.</p> + <p>This makes me taller than 100 pixels.</p> + </div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}</p> +</div> + +<h2 id="Líneas_de_la_cuadrículaEdit">Líneas de la cuadrícula<a class="button section-edit only-icon" href="/es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_B%C3%A1sicos_del_Posicionamiento_con_Rejillas$edit#Líneas_de_Rejilla" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<p>Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.</p> + +<h3 id="Posicionando_elementos_de_acuerdo_a_las_líneas">Posicionando elementos de acuerdo a las líneas</h3> + +<p>Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento y tomamos como punto de referencia la línea - en lugar de la vía.</p> + +<p>En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna, usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.</p> + +<p>El segundo elemento comienza en la línea de columna 1 de la cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.</p> + +<div id="Líneas_de_Rejilla"> +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}</p> +</div> + +<p>No olvide que puede utilizar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.</p> + +<h2 id="Celdas_de_cuadrícula">Celdas de cuadrícula</h2> + +<p>Una <em>celda de cuadrícula</em> es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Áreas_de_cuadrícula">Áreas de cuadrícula</h2> + +<p>Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un <em>área de cuadrícula</em>. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Canaletas_2">Canaletas</h2> + +<p>Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.</p> + +<div id="Canaletas"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo <code>grid-</code> como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.</p> +</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> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + grid-column-gap: 10px; + grid-row-gap: 1em; + + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Canaletas') }}</p> +</div> + +<p>Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías <code>fr</code> de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.</p> + +<h2 id="Anidamiento_de_cuadrículas">Anidamiento de cuadrículas</h2> + +<p>Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.</p> + +<div id="anidamiento"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>Si establezco <code>box1</code> a <code>display: grid</code> puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<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); +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.box1 { + grid-column: 1 / 4; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('anidamiento', '600', '340') }}</p> + +<p>En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la <a class="new" href="/es/docs/Web/CSS/grid-gap" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>grid-gap</code></a> del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.</p> + +<h3 id="Subgrid">Subgrid</h3> + +<p>En la especificación de grid de nivel 1 hay una característica llamada <em>subgrid</em> que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.</p> + +<div class="note"> +<p>Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.</p> +</div> + +<p>En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar <code>display: subgrid</code> en lugar de <code>display: grid</code>, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.</p> + +<p>Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: subgrid; +} +</pre> + +<h2 id="Estratificando_elementos_con_z-index">Estratificando elementos con <code>z-index</code></h2> + +<p>Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.</p> + +<div id="l_ex"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p>El elemento <code>box2</code> ahora se superpone a <code>box1</code>, se muestra en la parte superior ya que aparece después en el orden de origen.</p> + +<h3 id="Controlando_el_orden">Controlando el orden</h3> + +<p>Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a <code>box2</code> un <code>z-index</code> más bajo que <code>box1</code>, se mostrará debajo de box1 en la pila.</p> + +<div id="controlando_el_orden"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}</p> + +<h2 id="Siguientes_Pasos">Siguientes Pasos</h2> + +<p>En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout</a>.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con cuadrículas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de cuadrícula</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de cuadrícula con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">cuadrículas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de cuadrícula</a></li> + </ol> + </li> +</ol> +</section> +</div> diff --git a/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..7339530ff1 --- /dev/null +++ b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,169 @@ +--- +title: CSS Grid Layout y accesibilidad +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +<p>Los que llevamos en esto del desarrollo web más años de los que queremos recordar podríamos considerar que CSS Grid es un poco como "maquetar con tablas". En los primeros tiempos del diseño web la manera de maquetar la página era usando tablas HTML y "troceando" los elementos dentro de las celdas de esas tablas para crear un diseño. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.</p> + +<p>In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the <a href="http://www.csszengarden.com/">CSS Zen Garden</a> showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.</p> + +<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> does not have the same issues that tables did, our grid structure is defined in CSS rather than in the mark-up. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? Is it possible that we could <em>create</em> an accessibility issue through our use of grids?</p> + +<h2 id="Re-ordering_content_in_CSS_Grid_Layout">Re-ordering content in CSS Grid Layout</h2> + +<p>We’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use <code>grid-auto-flow: dense</code> which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.</p> + +<p>The <a href="https://drafts.csswg.org/css-grid/#order-accessibility">specification</a> includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.</p> + +<blockquote> +<p>Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> HTML5).</p> +</blockquote> + +<p>If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.</p> + +<p>The specification warns authors (the CSSWG term for web developers) not to do this reordering.</p> + +<blockquote> +<p>Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.</p> +</blockquote> + +<p>What does this mean for designing with grid layout in practice?</p> + +<h3 id="Visual_not_logical_re-ordering">Visual not logical re-ordering</h3> + +<p>Any time you reorder things with grid layout – or with flexbox – you only perform <em>visual reordering</em>. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.</p> + +<p>In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.</p> + +<div id="accessibility_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column: 1; + grid-row: 2; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"><a href="">One</a></div> + <div class="box box2"><a href="">Two</a></div> + <div class="box box3"><a href="">Three</a></div> + <div class="box box4"><a href="">Four</a></div> + <div class="box box5"><a href="">Five</a></div> +</div> +</pre> + +<p>{{ EmbedLiveSample('accessibility_1', '500', '330') }}</p> +</div> + +<p>The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.</p> + +<h2 id="How_should_we_approach_accessibility_for_grid_layout">How should we approach accessibility for grid layout?</h2> + +<p>From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?</p> + +<dl> + <dt>Start with a structured and accessible document</dt> + <dd>A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for <em>your smallest screen devices too</em>. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.</dd> + <dt>Create a responsive, and responsible grid</dt> + <dd>With a solid document you can begin to add your layout, it is likely you will be using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to <em>tab around the document</em>. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.</dd> + <dt>Returning to the source</dt> + <dd>If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.</dd> +</dl> + +<h2 id="Grid_and_the_danger_of_markup_flattening">Grid and the danger of markup flattening</h2> + +<p>Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to <em>flatten</em> markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, <em>that</em> <code>ul</code> becomes a grid item – the child {{HTMLElement("li")}} elements do not.</p> + +<p>If the <code>subgrid</code> value of {{cssxref("display")}} becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the <code>ul</code> element a <em>subgrid</em>. Currently the only way to do this is to use <code>display: contents</code> to cause the box generated by the <code>ul</code> to disappear from the DOM. For more information about this interaction see the guide on the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a> and the section on <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_display_contents">display: contents</a></code>.</p> + +<p>Given that interoperable support for <code>display: contents</code> is limited and we do not yet have subgrids, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to <code>display: grid</code>. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!</p> + +<h2 id="Further_reading">Further reading</h2> + +<p>There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.</p> + +<p>The concept of visual display following document source order is detailed in the <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em>.</p> + +<p>As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the Keyboard Navigation Disconnect</a></em> from Léonie Watson. Also <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">the video of Léonie’s presentation from ffconf</a> is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> – although this was prior to grid support being fully implemented in Firefox.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d26c21f5fa --- /dev/null +++ b/files/es/web/css/css_grid_layout/index.html @@ -0,0 +1,251 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid layout</strong> contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.</p> + +<p>Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Ejemplo sencillo</h2> + +<p>El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Funciones_CSS">Funciones CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glosario">Glosario</h3> + +<div class="index"> +<ul> + <li><a href="/es/docs/Glossary/Grid">Grid</a></li> + <li><a href="/es/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/es/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/es/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/es/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/es/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/es/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<div class="index"> +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Recursos_externos">Recursos externos</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - Un juego para aprender el grid</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS Grid 2") }}</td> + <td>{{ Spec2("CSS Grid 2") }}</td> + <td>Added <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<section class="Quick_links" id="Enlaces_Rapidos"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Grid</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> +</section> diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..d477402114 --- /dev/null +++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,597 @@ +--- +title: Realizing common layouts using CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<p>Para completar este conjunto de guías de CSS Grid Layout, voy a recorrer algunos diseños diferentes, que demuestran algunas de las diferentes técnicas que puede utilizar al diseñar con grid layout. Vamos a ver un ejemplo usando <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas"> grid-template-areas</a> un típico sistema de cuadrícula flexible de 12 columnas, y también un listado de productos usando el emplazamiento automático. Como puedes ver en este conjunto de ejemplos, a menudo hay más de una manera de lograr el resultado que deseas con el diseño de cuadrícula. Escoge el método que encuentres más útil para los problemas que estás resolviendo y los diseños que necesitas implementar.</p> + +<h2 id="Responsive_layout_de_1_a_3_columnas_fluidas_usando_grid-template-areas">Responsive layout de 1 a 3 columnas fluidas usando <code>grid-template-areas</code></h2> + +<p>Muchos sitios web son una variación de este tipo de diseño: contenido, barras laterales, un encabezado y un pie de página. En diseños responsivos, es posible que quieras mostrar el diseño en una sola columna, agregando una barra lateral en un punto de interrupción determinado y luego incorporar un diseño de tres columnas para pantallas más amplias.</p> + +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> + +<p>Voy a crear este layout usando la propiedad <em>named template areas</em> que aprendimos en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p> + +<p>Mi marcado consiste en un container con elementos en su interior para el header, footer, contenido principal, navegación, sidebar, y un bloque para poner anuncios./p></p> + +<div id="layout_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>Área principal del artículo</h1> + <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p> + </article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> +</div> +</pre> + +<p>Al usar {{cssxref("grid-template-areas")}} para crear el diseño. A parte de las media queries necesito nombrar las áreas. Nombremos las áreas con la propiedad {{cssxref("grid-area")}} property.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Esto no creará ningún diseño, sin embargo, nuestros elementos ahora tienen nombres que podemos utilizar para hacerlo. Al margen de las media queries, ahora voy a configurar el diseño para el ancho móvil. Aquí estoy manteniendo todo en el orden de origen, tratando de evitar cualquier separación entre la fuente y la pantalla, tal y como se describe en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout y accesibilidad</a></em>. No he definido ninguna vía de columna o de fila, pero este diseño dicta una sola columna, y las filas se crearán según sea necesario para cada uno de los items de la cuadrícula implícita.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</pre> + +<p>Después de establecer la columna simple para todas los tamaños de pantalla, ahora podemos añadir una <a href="/es/docs/Web/CSS/Media_Queries">media query</a> y redefinir nuestro layout para los casos en los que tuviéramos suficiente pantalla real como para mostrar dos columnas.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Se puede ver la forma del layout en los valores de {{cssxref("grid-template-areas")}}. El <code>header</code> se expande en dos vías de columna, lo mismo que <code>nav</code>. En la tercera vía de fila tenemos el <code>sidebar</code> al costado del <code>content</code>. En la cuarta vía de fila he decidido poner el contenido <code>ad</code> – por tanto aparecerá debajo de sidebar,y a continuación, el <code>footer</code> , debajo del contenido. Estoy utilizando flexbox en la navegación para mostrarlo en una fila espaciada.</p> + +<p>Ahora puedo añadir un punto de ruptura final para pasar a un diseño de tres columnas.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>El diseño de tres columnas tiene dos columnas laterales de <code>1fr</code> y una columna central que tiene <code>4fr</code> como tamaño de vía. Esto significa que el espacio disponible en el contenedor se divide en 6 y se asigna en proporción a nuestras tres pistas - una parte cada una a las columnas laterales y 4 partes al centro.</p> + +<p>En este diseño estoy mostrando <code>nav</code> en la columna de la izquierda, junto al <code>content</code>. En la columna de la derecha tenemos <code>sidebar</code> y debajo están los anuncios (<code>ad</code>). El <code>footer</code> se extiende a lo largo de la parte inferior del diseño. Luego uso flexbox para mostrar la navegación como una columna.</p> + +<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> +</div> + +<p>Este es un ejemplo simple pero demuestra cómo podemos usar un diseño de cuadrícula para reorganizar nuestro diseño para diferentes puntos de ruptura. En particular, estoy cambiando la ubicación de ese bloque de anuncios <code>ad</code>, según corresponda en mis diferentes configuraciones de columna. Este método de nombrar las áreas me parece muy útil en una etapa de prototipado, es fácil jugar con la ubicación de los elementos. Siempre se puede empezar a utilizar la rejilla de esta manera para la creación de prototipos, incluso si no se puede confiar plenamente en ella en producción debido a los navegadores que visitan su sitio.</p> + +<h2 id="Diseño_flexible_de_12-columnas">Diseño flexible de 12-columnas</h2> + +<p>Si has estado trabajando con uno de los muchos frameworks o sistemas de cuadrícula puedes estar acostumbrado a diseñar tu sitio en una cuadrícula flexible de 12 o 16 columnas. Podemos crear este tipo de sistema utilizando CSS Grid Layout. Como ejemplo simple, estoy creando una cuadrícula flexible de 12 columnas que tiene 12 pistas de columna de <code>1fr</code> -unidad, todas tienen una línea de inicio llamada <code>col-start</code>. Esto significa que tendremos doce líneas de cuadrícula llamadas <code>col-start</code>.</p> + +<div id="layout_2"> +<div class="hidden"> +<pre class="brush: css">.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Para demostrar cómo funciona este sistema de rejilla tengo 4 ítems hijos dentro de mi wrapper.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Start column line 1, span 3 column tracks.</div> + <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div> + <div class="item3">Start row 2 column line 2, span 2 column tracks.</div> + <div class="item4">Start at column line 3, span to the end of the grid (-1).</div> +</div> +</pre> + +<p>Entonces puedo ponerlos en la rejilla usando los nombres de las líneas, y la palabra clave span.</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p> +</div> + +<p>Como se describe en la <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guía de líneas con nombre</a>, estamos utilizando la línea con nombre para colocar nuestro ítem. Como tenemos 12 líneas todas con el mismo nombre usamos el nombre, y luego el index de la línea. También puedes usar el propio index de líneas si lo prefieres y evitar el uso de líneas con nombre.</p> + +<p>En lugar de establecer el número de la línea final, he elegido decir cuántas pistas debe expandir este elemento, utilizando la palabra clave span. Me gusta este enfoque, ya que cuando trabajamos con un sistema de diseño de múltiples columnas normalmente pensamos en bloques en términos del número de vías de la cuadrícula que atraviesan, y los ajustamos para diferentes puntos de ruptura. Para ver cómo se alinean los bloques con las vías, utiliza el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. Muestra claramente cómo se colocan nuestros ítems.</p> + +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> + +<p>Existen algunas diferencias clave sobre cómo funciona un diseño de cuadrícula en los sistemas de cuadrícula que se pueden haber utilizado anteriormente. Como puedes ver, no necesitamos añadir ningún marcado para crear una fila, los sistemas de cuadrícula necesitan hacer esto para evitar que los elementos salten a la fila de arriba. Con CSS Grid Layout, podemos colocar las cosas en filas, sin peligro de que suban a la fila de arriba si se dejan vacías. Debido a esta <em>estricta</em> colocación de columnas y filas, también podemos dejar fácilmente espacio en blanco en nuestro diseño. Tampoco necesitamos clases especiales que tiren o empujen cosas, para que se introduzcan en la rejilla. Todo lo que tenemos que hacer es especificar la línea de inicio y final del ítem.</p> + +<h3 id="Construcción_de_un_diseño_utilizando_el_sistema_de_12_columnas">Construcción de un diseño utilizando el sistema de 12 columnas</h3> + +<p>Para ver cómo funciona este método de diseño en la práctica, podemos crear el mismo diseño que creamos con {{cssxref("grid-template-areas")}}, esta vez utilizando el sistema de cuadrícula de 12 columnas. Comienzo con el mismo marcado que el utilizado para el ejemplo de áreas de plantillas de cuadrícula.</p> + +<div id="layout_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"><h1>Área principal del artículo</h1> + <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p></article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> + </div> +</pre> + +<p>Entonces puedo configurar nuestra cuadrícula, como en el ejemplo del diseño de 12 columnas de arriba.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Una vez más vamos a hacer de este un diseño responsivo, pero esta vez usando líneas con nombre. Cada punto de interrupción utilizará una cuadrícula de 12 columnas, sin embargo, el número de pistas que los ítems expandirán cambiará dependiendo del tamaño de la pantalla.</p> + +<p>Empezamos con el móvil primero, y todo lo que queremos para las pantallas más estrechas es que los elementos permanezcan en el orden de origen, y que todos se expandan a lo largo de la cuadrícula.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>En el siguiente punto de ruptura queremos pasar a un diseño de dos columnas. Nuestro encabezado y navegación todavía se extienden por toda la cuadrícula, por lo que no necesitamos especificar ninguna posición para ellos. La barra lateral comienza en la primera línea de la columna llamada col-start, que abarca 3 líneas. Va después de la línea 3 de la fila, ya que la cabecera y la navegación se encuentran en las dos primeras pistas de la fila.</p> + +<p>El panel de anuncios se encuentra debajo de la barra lateral, por lo que comienza en la línea 4 de la fila de la cuadrícula. Luego tenemos el contenido y el pie de página comenzando en col-start 4 y abarcando 9 pistas que los llevan al final de la cuadrícula.</p> + +<pre class="brush: css">@media (min-width: 500px) { + + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Finalmente vamos a la versión de tres columnas de este diseño. El encabezado continúa extendiéndose por toda la cuadrícula, pero ahora la navegación se mueve hacia abajo para convertirse en la primera barra lateral, con el contenido y la barra lateral al lado. El pie de página ahora también se extiende por todo el diseño.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p> +</div> + +<p>Una vez más el Grid Inspector <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> es útil para ayudarnos a ver cómo ha tomado forma nuestro diseño.</p> + +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> + +<p>Algo a tener en cuenta a la hora de crear este diseño es que no hemos necesitado posicionar explícitamente cada elemento en la cuadrícula en cada punto de ruptura. Hemos sido capaces de heredar la colocación establecida para puntos de ruptura anteriores - una ventaja de trabajar " mobile first ". También podemos aprovechar la colocación automática de la rejilla. Al mantener los elementos en un orden lógico, la colocación automática realiza una gran cantidad de trabajo por nosotros al colocar los elementos en la cuadrícula. En el último ejemplo de esta guía crearemos un diseño que se basa totalmente en la colocación automática</p> + +<h2 id="Un_listado_de_productos_con_auto-placement">Un listado de productos con auto-placement</h2> + +<p>Muchos diseños son esencialmente conjuntos de "tarjetas" - listados de productos, galerías de imágenes, etc. Una cuadrícula puede hacer que sea muy fácil crear estos listados de una manera responsiva sin necesidad de añadir <a href="/es/docs/Web/CSS/Media_Queries">media queries</a> para ello. En este siguiente ejemplo estoy combinando CSS Grid y Flexbox Layouts para hacer un sencillo diseño de listado de productos.</p> + +<p>El marcado de mi anuncio es una lista no ordenada de artículos. Cada elemento contiene un encabezado, un texto de altura variable y un enlace para llamar a la acción.</p> + +<div id="layout_4"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item Uno</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Dos</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li class="wide"> + <h2>Item Tres</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p> + <p>Este tiene más texto que los demás.</p> + <p>Un poquito más</p> + <p>¿Podríamos hacer algo diferente con él?</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cuatro</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cinco</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } +</pre> +</div> + +<p>Vamos a crear una cuadrícula con un número flexible de columnas flexibles. Quiero que nunca sean más pequeñas que 200 píxeles, y que luego compartan el espacio restante disponible por igual, de modo que siempre obtengamos pistas de columna de igual ancho. Esto lo logramos con la función <code>minmax()</code> en nuestra notación repeat para el dimensionamiento de pistas.</p> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>Tan pronto como añado este CSS, los ítems empiezan a desplegarse como una cuadrícula. Si hago la ventana más pequeña o más ancha, el número de pistas de columna cambia, sin necesidad de añadir puntos de interrupción mediante media queries y redefinir la cuadrícula.</p> + +<p>Luego puedo ordenar el interior de las cajas con un pequeño toque de flexbox. Establezco la lista de ítems como <code>display: flex</code> y la propiedad <code>flex-direction</code> como <code>column</code>. Entonces puedo usar un auto margin en <code>.cta</code> para empujar esta barra hacia abajo hasta el fondo de la caja./p></p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<p>Esta es realmente una de las razones clave por las que usaría flexbox en lugar de grid, si sólo estoy alineando o distribuyendo algo en una sola dimensión, ese es un caso de uso de flexbox.</p> + +<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> +</div> + +<p>Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas cartas que contienen mucho más contenido que las otras. Podría ser bueno hacer que se expandan a lo largo de dos pistas, y entonces no serán tan altas. Tengo una clase <code>wide</code> en mi ítem más grande, y añado una regla {{cssxref("grid-column-end")}} con el valor <code>span 2</code>. Ahora cuando la rejilla llegue a este ítem, le asignará dos pistas. En algunos puntos de ruptura, esto significa que obtendremos un hueco en la cuadrícula - donde no haya espacio para colocar un elemento de dos pistas.</p> + +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> + +<p>Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}<code>: dense</code> en el grid container. Sin embargo, presta atención al hacer esto, ya que saca los elementos de su orden lógico de origen. Sólo deberías hacerlo si tus ítems no tienen un orden establecido - y en ese caso tener en cuenta características de <a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">accesibilidad</a>: el tabulador seguirá el orden de la fuente y no de la visualización reordenada.</p> + +<div id="layout_5"> +<div class="hidden"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item Uno</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Dos</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li class="wide"> + <h2>Item Tres</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p> + <p>Este tiene más texto que los demás.</p> + <p>Un poquito más</p> + <p>¿Podríamos hacer algo diferente con él?</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cuatro</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cinco</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } + +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> + +<p>Esta técnica de auto-placement con algunas reglas aplicadas a ciertos ítems es muy útil, y puede ayudarte a lidiar con el contenido que está siendo generado por un CMS, por ejemplo, donde has repetido ítems y quizás puedas añadir una clase a ciertos ítems a medida que son generados en el HTML. with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p> +</div> + +<h2 id="Aprender_más">Aprender más</h2> + +<p>La mejor manera de aprender a usar el diseño de la cuadrícula es continuar construyendo ejemplos como los que hemos tratado aquí. Escoge algo que normalmente construyes usando tu framework preferido, o usando floats, y ve si puedes construirlo usando grid. No olvides buscar ejemplos que sean imposibles de construir con los métodos actuales. Eso podría significar inspirarse en revistas u otras fuentes ajenas a la web. Grid Layout abre posibilidades que antes no teníamos, no necesitamos estar atados a los mismos viejos layouts para utilizarlo</p> + +<ul> + <li>Para inspirarte mira <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons</a>, ella ha estado creando diseños basados en una variedad de fuentes.</li> + <li>ara obtener patrones de diseño comunes adicionales, consulta <em><a href="http://gridbyexample.com">Grid by Example</a></em>, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p>CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta <em>Grid</em> junto con otras técnicas que ya se estén usando.</p> + +<div class="note"> +<p>Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será <em>Grid</em>.</p> +</div> + +<h2 id="Grid_y_flexbox">Grid y flexbox</h2> + +<p>La diferencia básica entre CSS Grid Layout y <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender <em>Grid</em>.</p> + +<h3 id="Diseños_de_Una_dimensión_vs._dos_dimensiones">Diseños de Una dimensión vs. dos dimensiones</h3> + +<p>Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.</p> + +<p>En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.</p> + +<p>También he configurado la propiedad <code>wrap</code>{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.</p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p>En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.</p> + +<p>La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.</p> + +<h3 id="El_mismo_diseño_con_CSS_Grid_Layout">El mismo diseño con CSS Grid Layout</h3> + +<p>En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de <code>1fr</code>. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.</p> + +<div class="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>Hay una pregunta muy simple para decidir si utilizar grid o flexbox:</p> + +<ul> + <li>¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox</li> + <li>¿Necesito controlar el diseño por filas y por columnas? – usa grid</li> +</ul> + +<h3 id="¿Contenido_fuera_o_layout_dentro">¿Contenido fuera o layout dentro?</h3> + +<p>Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible <em>en esa línea</em>.</p> + +<p>Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.</p> + +<p>Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.</p> + +<h3 id="Alineación_de_Cajas">Alineación de Cajas</h3> + +<p>La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.</p> + +<p>Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.</p> + +<p>En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.</p> + +<p>El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en <code>flex-end</code> para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en <code>box1</code> para que anule el valor por defecto y se estire a la altura del contenedor, y en <code>box2</code> para que se alinee con el inicio del contenedor flexible.</p> + +<div id="Alineacion_de_cajas"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}</p> +</div> + +<h3 id="Alineación_en_CSS_Grid_Layout">Alineación en CSS Grid Layout</h3> + +<p>En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a <code>start</code> y a <code>end</code> en vez de a <code>flex-start</code> y<code>flex-end</code>. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.</p> + +<div id="Alineacion_en_Cssgrid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}</p> +</div> + +<h3 id="La_unidad_fr_y_flex-basis">La unidad <code>fr</code> y <code>flex-basis</code></h3> + +<p>Ya hemos visto que la unidad <code>fr</code> asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad <code>fr</code>combinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades <code>flex</code> en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.</p> + +<p>Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.</p> + +<p>En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.</p> + +<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> + +<p>Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades <code>auto-fill</code> y <code>auto-fit</code>.</p> + +<p>En el siguiente ejemplo he usado <code>auto-fill</code> en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 id="Una_cantidad_flexible_de_pistas">Una cantidad flexible de pistas</h3> + +<p>Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando <code>auto-fill</code> y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con <code>minmax</code>. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en <code>1fr</code>. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de <code>1fr</code> y repartirá el espacio restante entre los ítems.</p> + +<div id="cantidad_flexible_pistas"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}</p> +</div> + +<p>Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.</p> + +<h2 id="El_grid_y_los_elementos_absolutamente_posicionados">El grid y los elementos absolutamente posicionados</h2> + +<p>Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.</p> + +<h3 id="El_grid_container_como_bloque_contenedor">El grid container como bloque contenedor</h3> + +<p>Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad <code>position:</code> <code>absolute</code> a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.</p> + +<p>En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene <code>position:</code> <code>relative</code> y así se convierte en el contexto de posicionamiento de este elemento.</p> + +<div id="grid_container_como_bloque_contenedor"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}</p> +</div> + +<p>Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades <code>top </code> y <code>left</code>. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.</p> + +<p>Si eliminamos <code>position:</code> <code>absolute</code> de las reglas de <code>.box3</code> podemos ver cómo se mostraría sin el posicionamiento.</p> + +<h3 id="El_grid_container_como_parent">El grid container como parent</h3> + +<p>Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos <code>position:</code> <code>relative</code> del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.</p> + +<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.</p> + +<h3 id="Con_un_grid_area_como_parent_2">Con un grid area como parent</h3> + +<p>Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de <code>.box3</code> de la cuadrícula.</p> + +<p>He dado a <code>.box3</code> position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area</p> + +<div id="Con_un_grid_area_como_parent"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.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="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}</p> +</div> + +<h2 id="Grid_y_display_contents">Grid y <code>display:</code> <code>contents</code></h2> + +<p>Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y <code>display:</code> <code>contents</code>. El valor de <code>contents</code> en la propiedad display es un nuevo valor que se describe en <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> de la siguiente manera:</p> + +<blockquote> +<p>“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”</p> +</blockquote> + +<p>Si configuras un ítem como <code>display:</code> <code>contents</code> la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como <code>display</code>:<code>block</code>.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>Si ahora añado <code>display:</code> <code>contents</code> a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar <code>display:</code> <code>contents</code> de manera similar en flexbox para que los ítems anidados se conviertan en flex items.</p> + +<p>Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li> + </ol> + </li> +</ol> +</section> |