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

Grid CSS<\/strong> tienen una serie de propiedades que se pueden utilizar para colocar los \u00edtems dentro de la cuadr\u00edcula. Con ellas podemos distribuir los elementos de forma muy sencilla. Dichas propiedades son justify-items<\/code> y align-items<\/code>, que se usan en el m\u00f3dulo CSS flexbox<\/strong>.<\/p>\n\n\n\n\n\n\n\n

Propiedad<\/th>Valores<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
justify-items<\/code><\/td>start | end | center | stretch<\/strong><\/td>Distribuye los elementos en el eje horizontal.<\/td><\/tr>
align-items<\/code><\/td>start | end | center | stretch<\/strong><\/td>Distribuye los elementos en el eje vertical.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Estas propiedades se aplican sobre el elemento contenedor padre, pero afectan a los \u00edtems hijos, por lo que act\u00faan sobre la distribuci\u00f3n de cada uno de los hijos. En el caso de que queramos que uno de los \u00edtems hijos tengan una distribuci\u00f3n diferente al resto, aplicamos la propiedad justify-self<\/code> o align-self<\/code> sobre el \u00edtem hijo en cuesti\u00f3n, sobreescribiendo su distribuci\u00f3n.<\/p>\n\n\n\n

Estas propiedades funcionan exactamente igual que sus an\u00e1logas justify-items<\/code> o align-items<\/code>, s\u00f3lo que en lugar de indicarse en el elemento padre contenedor, se hace sobre un elemento hijo. Las propiedades sobre \u00edtems hijos las veremos m\u00e1s adelante.<\/p>\n\n\n\n

Tambi\u00e9n podemos utilizar las propiedades justify-content<\/code> o align-content<\/code> para modificar la distribuci\u00f3n de todo el contenido en su conjunto, y no s\u00f3lo de los \u00edtems por separado.<\/p>\n\n\n\n

Propiedad<\/th>Valores<\/th><\/tr><\/thead>
justify-content<\/code><\/td>start | end | center | stretch | space-around | space-between | space-evenly<\/td><\/tr>
align-content<\/code><\/td>start | end | center | stretch | space-around | space-between | space-evenly<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

De esta forma, podemos controlar pr\u00e1cticamente todos los aspectos de posicionamiento de la cuadr\u00edcula directamente desde los estilos CSS<\/strong> de su contenedor padre.<\/p>\n\n\n\n

Atajo de posiciones Grid<\/h2>\n\n\n\n

Si vamos a crear estructuras grid<\/strong> donde necesitamos utilizar las cuatro propiedades anteriores, quiz\u00e1s ser\u00eda mejor utilizar un atajo donde simplificar\u00edamos mucho el c\u00f3digo resultante. Es el caso de las siguientes propiedades.<\/p>\n\n\n\n

Propiedad<\/th>Valores<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
place-items<\/code><\/td>[align-items<\/em>] [justify-items<\/em>]<\/td>Propiedad de atajo para *-items<\/strong><\/td><\/tr>
place-content<\/code><\/td>[align-content<\/em>] [justify-content<\/em>]<\/td>Propiedad de atajo para *-content<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Con ellas conseguiremos que nuestro c\u00f3digo sea menos verboso.<\/p>\n","protected":false},"excerpt":{"rendered":"

Grid CSS tienen una serie de propiedades que se pueden utilizar para colocar los \u00edtems dentro de la cuadr\u00edcula. Con ellas podemos…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1537","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":"Grid CSS tienen una serie de propiedades que se pueden utilizar para colocar los \u00edtems dentro de la cuadr\u00edcula. Con ellas podemos...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1537","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=1537"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1537\/revisions"}],"predecessor-version":[{"id":1539,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1537\/revisions\/1539"}],"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=1537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}