diff options
Diffstat (limited to 'files/es/web/css/grid-column-gap/index.html')
| -rw-r--r-- | files/es/web/css/grid-column-gap/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html new file mode 100644 index 0000000000..4fb514cc7f --- /dev/null +++ b/files/es/web/css/grid-column-gap/index.html @@ -0,0 +1,157 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +--- +<p>La propiedad CSS <strong><code>grid-column-gap</code></strong> especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.</p> + +<pre class="brush: css no-line-numbers">/* <length> values */ +grid-column-gap: 20px; +grid-column-gap: 1em; +grid-column-gap: 3vmin; +grid-column-gap: 0.5cm; + +/* <percentage> value */ +grid-column-gap: 10%; + +/* Global values */ +grid-column-gap: inherit; +grid-column-gap: initial; +grid-column-gap: unset; +</pre> + +<p>El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[6]">#grid { + display: grid; + height: 100px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + grid-column-gap: 20px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.grid-column-gap")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}}</li> + <li>Guía sobre CSS Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Conceptos básicos sobre CSS Grid Layout - Gutters</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><strong> <a href="/en-US/docs/Web/CSS/Reference">Referencia CSS</a></strong></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Diseño CSS Grid</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos sobre Diseño CSS Grid </a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de diseño</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en línea</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>Propiedades</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-colunms</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>Glosario</strong></a> + <ol> + <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_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> |