{"id":1528,"date":"2024-08-02T07:07:12","date_gmt":"2024-08-02T05:07:12","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1528"},"modified":"2024-08-02T07:07:12","modified_gmt":"2024-08-02T05:07:12","slug":"06-grid-con-lineas-nombradas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/06-grid-con-lineas-nombradas\/","title":{"rendered":"06. Grid con l\u00edneas nombradas"},"content":{"rendered":"\n

Gracias a Grid CSS<\/strong> tambi\u00e9n tenemos la posibilidad de usar \u00ablinenames<\/strong>\u00bb, o lo que es lo mismo, ponerle nombre a las l\u00edneas de nuestro sistema grid<\/strong>. Vamos a verlo con un ejemplo, donde probablemente se vea mucho mejor. Creamos esta estructura HTML.<\/p>\n\n\n\n\n\n\n\n

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

    <div class=\"grid\">\n      <div class=\"header\">Header<\/div>\n      <div class=\"sidebar\">Sidebar<\/div>\n      <div class=\"content\">Content<\/div>\n      <div class=\"footer\">Footer<\/div>\n    <\/div><\/pre>\n\n\n\n
Los nombres de las clases<\/strong> ya nos dan idea del contenido que tienen. Despu\u00e9s, mediante Grid CSS<\/strong> le damos una estructura definida. Para ello, vamos a considerar los siguientes nombres para las lineas de nuestro grid<\/strong>, utilizando X<\/strong> para las posiciones en el eje X<\/strong> y utilizando Y<\/strong> para las posiciones en el eje Y<\/strong>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Sabiendo esto, lo \u00fanico que hay que hacer es indicar estos nombres entre corchetes<\/strong>, justo antes de la medida que establecimos como vimos en apartados anteriores. Tambi\u00e9n se ha de colocar una nombre de l\u00ednea final sin medida a continuaci\u00f3n, que representa la l\u00ednea final.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
    .grid {\n      display: grid;\n      grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];\n      grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3];\n    }<\/pre>\n\n\n\n
En este caso, los nombres utilizados son tan s\u00f3lo un ejemplo did\u00e1ctico. Se pueden utilizar otros nombres quiz\u00e1s m\u00e1s amigables como top-line<\/code>, top-medium-line<\/code>, bottom-medium-line<\/code> y bottom-line<\/code>, por ejemplo, en lugar de y0<\/code>, y1<\/code>, y2<\/code> y y3<\/code> respectivamente.<\/p>\n\n\n\n
Ahora, teniendo los nombres, s\u00f3lo quedar\u00eda delimitar que zonas del grid queremos que ocupe cada uno de nuestros bloques <div><\/code> del grid. Para ello utilizaremos las propiedades grid-column-start<\/code>, grid-column-end<\/code> y grid-row-start<\/code>, grid-row-end<\/code>. Tambi\u00e9n podriamos utilizar sus propiedades de atajo grid-column<\/code> y grid-row<\/code>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
    .header {\n      background: darkred;\n      grid-column-start: x0;\n      grid-column-end: x3;\n      \/* Equivalente a grid-column: x0 \/ x3; *\/\n    }\n\n    .sidebar {\n      background: black;\n      grid-row: y1 \/ y2;\n      color: white;\n    }\n\n    .content {\n      background: orange;\n      grid-column: x1 \/ x3;\n      grid-row: y1 \/ y3;\n    }\n\n    .footer {\n      background: green;\n      grid-column: x0 \/ x3;\n      grid-row: y2;\n    }<\/pre>\n\n\n\n
Hemos aplicado la siguiente estructura:<\/p>\n\n\n\n
    \n
  • Zona\u00a0.header<\/code>\u00a0desde la columna\u00a0x0<\/strong>\u00a0a\u00a0x3<\/strong>.<\/li>\n\n\n\n
  • Zona\u00a0.sidebar<\/code>\u00a0desde la fila\u00a0y1<\/strong>\u00a0a\u00a0y2<\/strong>.<\/li>\n\n\n\n
  • Zona\u00a0.content<\/code>\u00a0desde la columna\u00a0x1<\/strong>\u00a0a\u00a0x3<\/strong>\u00a0y desde la fila\u00a0y1<\/strong>\u00a0a\u00a0y3<\/strong>.<\/li>\n\n\n\n
  • Zona\u00a0.footer<\/code>\u00a0desde la columna\u00a0x0<\/strong>\u00a0a\u00a0x3<\/strong>\u00a0en la fila\u00a0y2<\/strong>.<\/li>\n<\/ul>\n\n\n\n
    \n
    Nota:<\/strong> Ten en cuenta que ser\u00eda necesario darle un tama\u00f1o de alto con height<\/code> al contenedor padre para que el navegador sepa cuanto ocupar\u00e1 la estructura completa. Tambi\u00e9n podemos modificar las medidas 1fr<\/code> para dar menos proporci\u00f3n, por ejemplo utilizando en grid-template-rows<\/code> un [y0] 0.5fr<\/code> y un [y2] 0.25fr<\/code>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
    Gracias a Grid CSS tambi\u00e9n tenemos la posibilidad de usar \u00ablinenames\u00bb, o lo que es lo mismo, ponerle nombre a las l\u00edneas…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1528","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":"Gracias a Grid CSS tambi\u00e9n tenemos la posibilidad de usar \u00ablinenames\u00bb, o lo que es lo mismo, ponerle nombre a las l\u00edneas...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1528","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=1528"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1528\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1528\/revisions\/1530"}],"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=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}