{"id":1544,"date":"2024-08-02T07:12:56","date_gmt":"2024-08-02T05:12:56","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1544"},"modified":"2024-08-02T07:12:56","modified_gmt":"2024-08-02T05:12:56","slug":"11-propiedades-para-items-hijos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/11-propiedades-para-items-hijos\/","title":{"rendered":"11. Propiedades para \u00edtems hijos"},"content":{"rendered":"\n

Hasta este cap\u00edtulo, salvo algunas excepciones como justify-self<\/strong><\/em><\/code>,\u00a0align-self<\/strong><\/em><\/code>\u00a0o\u00a0grid-area<\/strong><\/em><\/code>, tan s\u00f3lo hemos visto propiedades CSS<\/strong> que se aplican solamente al contenedor padre de una cuadr\u00edcula. A continuaci\u00f3n, vamos a ver ciertas propiedades que en su lugar, se aplican a cada \u00edtem hijo de la cuadr\u00edcula, para alterar o cambiar el comportamiento espec\u00edfico de dicho elemento, que no se comporta como la mayor\u00eda.<\/p>\n\n\n\n\n\n\n\n

Algunas de las propiedades vistas hasta ahora son las siguientes.<\/p>\n\n\n\n

Propiedad<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
justify-self<\/code><\/td>Altera la justificaci\u00f3n del \u00edtem hijo en el eje horizontal.<\/td><\/tr>
align-self<\/code><\/td>Altera la alineaci\u00f3n del \u00edtem hijo en el eje vertical.<\/td><\/tr>
grid-area<\/code><\/td>Indica un nombre al \u00e1rea especificada, para su utilizaci\u00f3n con grid-template-areas<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Sin embargo, existen algunas propiedades m\u00e1s, referentes en este caso, a la posici\u00f3n de los hijos de la cuadr\u00edcula donde va a comenzar o terminar una fila o columna. Las propiedades son.<\/p>\n\n\n\n

Propiedad<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
grid-column-start<\/code><\/td>Indica en que columna empezar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/td><\/tr>
grid-column-end<\/code><\/td>Indica en que columna terminar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/td><\/tr>
grid-row-start<\/code><\/td>Indica en que fila empezar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/td><\/tr>
grid-row-end<\/code><\/td>Indica en que fila terminar\u00e1 el \u00edtem de la cuadr\u00edcula.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Con dichas propiedades, podemos indicar el siguiente c\u00f3digo CSS sobre el primer \u00edtem de una cuadr\u00edcula de 4 \u00edtems.<\/p>\n\n\n\n

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

    .grid {\n      display: grid;\n    }\n\n    .a {\n      grid-column-start: 1;\n      grid-column-end: 2;\n    }<\/pre>\n\n\n\n
De esta forma, tenemos una cuadr\u00edcula de 4 elementos, en el que indicamos la posici\u00f3n del \u00edtem 1 (elemento con clase.a<\/code><\/em>): comenzando en la columna 1 y acabando en el inicio de la columna 2.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ese ser\u00eda el funcionamiento normal. Donde se ve la utilidad de estas propiedades, es si variamos los valores de forma que tomen posiciones diferentes, como por ejemplo, si indicamos que el \u00edtem 1 debe comenzar en la columna 1, pero acabar en la columna 3 (ocupando la hipot\u00e9tica primera y segunda celda).<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
En este nuevo ejemplo, comenzamos el primer \u00edtem en la columna 2 y lo acabamos al principio de la columna 3, por lo que la celda permanecer\u00e1 en la posici\u00f3n de la segunda columna. Adem\u00e1s, a\u00f1adimos la propiedad grid-row-start<\/code> que hace lo mismo que hasta ahora, pero con las filas. En este caso, le indicamos que comience en la fila 3, por lo que el \u00edtem 1<\/strong> se desplaza a una nueva fila de la cuadr\u00edcula, dejando en la anterior el \u00edtem 4<\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tambi\u00e9n es posible utilizar la palabra clave span<\/strong> seguida de un n\u00famero, que indica que abarque hasta esa columna o celda.<\/p>\n\n\n\n
Atajo: grid-column y grid-row<\/h2>\n\n\n\n
El m\u00f3dulo grid de CSS proporciona las propiedades de atajo grid-column<\/code> y grid-row<\/code> donde se nos permite escribir en un formato abreviado las propiedades anteriores. Su sintaxis ser\u00eda la siguiente.<\/p>\n\n\n\n
    .grid {\n      display: grid;\n    }\n\n    .a {\n      \/* grid-column: <grid-column-start> <grid-column-end> *\/\n      \/* grid-row: <grid-row-start> <grid-row-end> *\/\n      grid-column: auto;\n      grid-column: 4 \/ 6;\n      grid-column: span 3;\n      grid-column: span 3 \/ 6;\n    }<\/pre>\n\n\n\n
\n
Nota<\/strong>: La especificaci\u00f3n de Grid CSS<\/strong> ya tiene buen soporte en la actualidad y puede utilizarse en producci\u00f3n. Eso s\u00ed, si requieres soporte para navegadores antiguos, s\u00e9 cuidadoso.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Hasta este cap\u00edtulo, salvo algunas excepciones como justify-self,\u00a0align-self\u00a0o\u00a0grid-area, tan s\u00f3lo hemos visto propiedades CSS que se aplican solamente al contenedor padre de…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1544","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":"Hasta este cap\u00edtulo, salvo algunas excepciones como justify-self,\u00a0align-self\u00a0o\u00a0grid-area, tan s\u00f3lo hemos visto propiedades CSS que se aplican solamente al contenedor padre de...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1544","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=1544"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1544\/revisions"}],"predecessor-version":[{"id":1549,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1544\/revisions\/1549"}],"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=1544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}