{"id":1550,"date":"2024-08-02T07:13:58","date_gmt":"2024-08-02T05:13:58","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1550"},"modified":"2024-08-02T07:13:58","modified_gmt":"2024-08-02T05:13:58","slug":"12-resumen-grid","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/12-resumen-grid\/","title":{"rendered":"12. Resumen Grid"},"content":{"rendered":"\n<p>Estas son las propiedades que nos vamos a encontrar si a la hora de maquetar nuestras p\u00e1ginas web utilizamos la tecnolog\u00eda <strong>Grid CSS<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Propiedades del contenedor<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>display<\/strong>: inline-grid \/ grid<\/li>\n\n\n\n<li><strong>grid-template-columns<\/strong>: se ponen las columnas que se quieran con los anchos que se quieran (por ejm: <strong><em>grid-template-columns: 200px auto<\/em><\/strong>), tambi\u00e9n se puede utilizar la funci\u00f3n <strong><em>repeat()<\/em><\/strong> de la siguiente manera (<strong><em>grid-template-columns: repeat(2, 200px);<\/em><\/strong>).<\/li>\n\n\n\n<li><strong>grid-template-rows<\/strong>: los mismos valores que para las columnas.<\/li>\n\n\n\n<li><strong>grid-template-areas<\/strong>.<\/li>\n\n\n\n<li><strong>grid-rows<\/strong>: mismo funcionamiento que\u00a0<strong>grid-columns<\/strong>.<\/li>\n\n\n\n<li><strong>grid-colums<\/strong>: 1 \/ 3 (ir\u00eda de la l\u00ednea 1 a la l\u00ednea 3)| span1 (usar\u00eda toda la l\u00ednea).<\/li>\n\n\n\n<li><strong>column-gap<\/strong>: crea huecos en las columnas (<strong><em>column-gap: 100px<\/em><\/strong>).<\/li>\n\n\n\n<li><strong>row-gap<\/strong>: para colocar huecos en las filas.<\/li>\n\n\n\n<li><strong>gap<\/strong>: shorthand de column-gap y row-gap (ejm: <strong><em>gap: &lt;row-gap> &lt;column-gap><\/em><\/strong>).<\/li>\n\n\n\n<li><strong>justify-items<\/strong>: distribuye los elementos en el eje horizontal, sus valores son: <strong><em>start<\/em> <\/strong>\/ <strong><em>end<\/em> <\/strong>\/ <strong><em>center<\/em> <\/strong>\/ <strong><em>stretch<\/em><\/strong><em>.<\/em><\/li>\n\n\n\n<li><strong>align-items<\/strong>: distribuye los elementos en el eje vertical, sus valores son: <strong><em>start<\/em> <\/strong>\/ <strong><em>end<\/em> <\/strong>\/ <strong><em>center<\/em> <\/strong>\/ <strong><em>stretch<\/em><\/strong><em>.<\/em><\/li>\n\n\n\n<li><strong>justify-content<\/strong>: act\u00faan sobre todo el bloque en el eje horizontal, los valores son: <strong><em>start<\/em> <\/strong>\/ <strong><em>end<\/em> <\/strong>\/ <strong><em>center<\/em> <\/strong>\/ <strong><em>space-around<\/em><\/strong> \/ <strong><em>space-between<\/em><\/strong> \/ <strong><em>space-evenly<\/em><\/strong><em>.<\/em><\/li>\n\n\n\n<li><strong>align-content<\/strong>: actuan sobre todo el bloque en el eje vertical, los valores son: <strong><em>start<\/em> <\/strong>\/ <strong><em>end<\/em> <\/strong>\/ <strong><em>center<\/em> <\/strong>\/ <strong><em>space-around<\/em><\/strong> \/ <strong><em>space-between<\/em><\/strong> \/ <strong><em>space-evenly<\/em><\/strong><em>.<\/em><\/li>\n\n\n\n<li><strong>grid-auto-columns<\/strong>: indica el tama\u00f1o autom\u00e1tico de ancho que tendr\u00e1n las columnas.<\/li>\n\n\n\n<li><strong>grid-auto-rows<\/strong>: el tama\u00f1o autom\u00e1tico de ancho de las filas.<\/li>\n\n\n\n<li><strong>grid-auto-flow<\/strong>: <strong><em>row<\/em> <\/strong>\/ <strong><em>column<\/em> <\/strong>\/ <strong><em>dense<\/em><\/strong>. Sirve para controlar el flujo del <strong>grid<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Propiedades para los items (hijos)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>justify-self<\/strong>: sobre un \u00fanico elemento hijo en el eje horizontal.<\/li>\n\n\n\n<li><strong>align-self<\/strong>: sobre un \u00fanico elemento hijo en el eje vertical.<\/li>\n\n\n\n<li><strong>grid-area<\/strong><\/li>\n\n\n\n<li><strong>grid-column-start<\/strong>: indica en que columna empieza el item de la cuadr\u00edcula.<\/li>\n\n\n\n<li><strong>grid-column-end<\/strong>: indica en que columna termina el item de la cuadr\u00edcula.<\/li>\n\n\n\n<li><strong>grid-row-start<\/strong>: indica en que fila empieza el item de la cuadr\u00edcula.<\/li>\n\n\n\n<li><strong>grid-column-end<\/strong>: indica en que fila termina el item de la cuadr\u00edcula.<\/li>\n\n\n\n<li><strong>grid-column<\/strong><\/li>\n\n\n\n<li><strong>grid-row<\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Estas son las propiedades que nos vamos a encontrar si a la hora de maquetar nuestras p\u00e1ginas web utilizamos la [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1550","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":"Estas son las propiedades que nos vamos a encontrar si a la hora de maquetar nuestras p\u00e1ginas web utilizamos la [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1550","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=1550"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1550\/revisions"}],"predecessor-version":[{"id":1552,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1550\/revisions\/1552"}],"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=1550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}