{"id":1534,"date":"2024-08-02T07:08:56","date_gmt":"2024-08-02T05:08:56","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1534"},"modified":"2024-08-02T07:08:56","modified_gmt":"2024-08-02T05:08:56","slug":"08-huecos-en-grid","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/08-huecos-en-grid\/","title":{"rendered":"08. Huecos en Grid"},"content":{"rendered":"\n

Por defecto, la cuadr\u00edcula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque ser\u00eda posible darle un margin<\/code> a las celdas dentro del contenedor, existe una forma m\u00e1s apropiada, que evita los problemas cl\u00e1sicos de los modelos de caja: los huecos<\/strong> (gutters<\/strong>).<\/p>\n\n\n\n\n\n\n\n

Para especificar los huecos<\/strong> (espacio entre celdas) podemos utilizar las propiedades column-gap<\/code> y\/o row-gap<\/code>. En ellas indicaremos el tama\u00f1o de dichos huecos.<\/p>\n\n\n\n

Propiedad<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
column-gap<\/code><\/td>Establece el  de los huecos<\/strong> entre columnas<\/strong> (l\u00edneas verticales).<\/td><\/tr>
row-gap<\/code><\/td>Establece el  de los huecos<\/strong> entre filas<\/strong> (l\u00edneas horizontales).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Cojamos el ejm del cap\u00edtulo anterior. En \u00e9l, le indicamos estas propiedades para colocar huecos<\/strong> entre las celdas de la cuadr\u00edcula. El c\u00f3digo a a\u00f1adir al ejemplo anterior ser\u00eda el siguiente:<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

    .grid {\n      column-gap: 100px;\n      row-gap: 10px;\n    }<\/pre>\n\n\n\n
Con este c\u00f3digo, obtenemos un resultado como el siguiente, indicando huecos entre columnas de 100px y huecos entre filas de 10px.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Atajo: Grid con huecos<\/h2>\n\n\n\n
Existe una propiedad de atajo para las propiedades column-gap<\/code> y row-gap<\/code>, permiti\u00e9ndonos la posibilidad de no tener que indicarlas por separado.<\/p>\n\n\n\n
La propiedad en cuesti\u00f3n ser\u00eda gap<\/code> y se utilizar\u00eda de la siguiente forma.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
    .grid {\n      \/* gap: <row-gap> <column-gap> *\/\n      gap: 20px 80px;\n      \/* Equivalente a gap: 40px 40px; *\/\n      \/* gap: <rowcolumn-gap> *\/\n      gap: 40px;\n    }<\/pre>\n\n\n\n
\n
Nota<\/strong>: Antiguamente, las propiedades column-gap<\/code>, row-gap<\/code> y gap<\/code> eran conocidas como grid-column-gap<\/code>, grid-row-gap<\/code> y grid-gap<\/code>, por lo que a\u00fan se puede encontrar informaci\u00f3n obsoleta que las mencione. Hoy en d\u00eda deber\u00edas utilizar las tres primeras en su lugar.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Por defecto, la cuadr\u00edcula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque ser\u00eda posible darle un margin a las celdas dentro del…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1534","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Por defecto, la cuadr\u00edcula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque ser\u00eda posible darle un margin a las celdas dentro del...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1534"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1534\/revisions"}],"predecessor-version":[{"id":1536,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1534\/revisions\/1536"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1511"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}