{"id":1519,"date":"2024-08-02T07:03:21","date_gmt":"2024-08-02T05:03:21","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1519"},"modified":"2024-08-02T07:03:21","modified_gmt":"2024-08-02T05:03:21","slug":"02-grid-css-conceptos","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/02-grid-css-conceptos\/","title":{"rendered":"02. Grid CSS – Conceptos"},"content":{"rendered":"\n

Manejo de Flexbox<\/h2>\n\n\n\n

Antes de comenzar con Grid CSS<\/strong>, quiz\u00e1s ser\u00eda importante dominar el sistema Flexbox<\/strong>, ya que Grid<\/strong> toma la filosof\u00eda y bases de \u00e9l. Para el uso de Grid CSS<\/strong> necesitamos tener en cuenta una serie de conceptos que utilizaremos a partir de ahora, los cuales comenzamos a definir.<\/p>\n\n\n\n\n\n\n\n

Conceptos<\/h2>\n\n\n\n

Estos son los conceptos que debemos aprender a la hora de manejar Grid CSS<\/p>\n\n\n\n

    \n
  • Contenedor<\/strong>: El elemento padre contenedor que definir\u00e1 la cuadr\u00edcula o rejilla.<\/li>\n\n\n\n
  • \u00cdtem<\/strong>: Cada uno de los hijos que contiene la cuadr\u00edcula (elemento contenedor<\/em>).<\/li>\n\n\n\n
  • Celda (grid cell)<\/strong>: Cada uno de los cuadritos (unidad m\u00ednima<\/em>) de la cuadr\u00edcula.<\/li>\n\n\n\n
  • Area (grid area)<\/strong>: Regi\u00f3n o conjunto de celdas de la cuadr\u00edcula.<\/li>\n\n\n\n
  • Banda (grid track)<\/strong>: Banda horizontal o vertical de celdas de la cuadr\u00edcula.<\/li>\n\n\n\n
  • L\u00ednea (grid line)<\/strong>: Separador horizontal o vertical de las celdas de la cuadr\u00edcula.<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Para utilizar cuadriculas Grid CSS<\/strong>, trabajaremos bajo el siguiente escenario:<\/p>\n\n\n\n

       <!-- contenedor -->    \n   <div class=\"grid\">\n      <!-- cada uno de los \u00edtems del grid -->\n      <div class=\"a\">Item 1<\/div>\n      <div class=\"b\">Item 2<\/div>\n      <div class=\"c\">Item 3<\/div>\n      <div class=\"d\">Item 4<\/div>\n    <\/div><\/pre>\n\n\n\n
    Para activar la cuadr\u00edcula grid<\/strong> hay que utilizar sobre el elemento contenedor la propiedad display<\/code> y especificar el valor grid<\/strong> o inline-grid<\/strong>.<\/p>\n\n\n\n
    Tipo de elemento<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
    inline-grid<\/em><\/strong><\/td>Establece una cuadr\u00edcula con \u00edtems en l\u00ednea, de forma equivalente a inline-block.<\/td><\/tr>
    grid<\/em><\/strong><\/td>Establece una cuadr\u00edcula con \u00edtems en bloque, de forma equivalente a block.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Este valor influye en como se comportar\u00e1 la cuadr\u00edcula con el contenido exterior. El primero de ellos permite que la cuadr\u00edcula aparezca encima\/debajo del contenido exterior (en bloque<\/em>) y el segundo de ellos permite que la cuadr\u00edcula aparezca a la izquierda\/derecha (en l\u00ednea<\/em>) del contenido exterior (ojo, la cuadr\u00edcula entera, no cada uno de sus \u00edtems<\/em>).<\/p>\n\n\n\n
    Una vez elegido uno de estos dos valores, y establecida la propiedad display<\/code> al elemento contenedor, hay varias formas de configurar nuestra cuadr\u00edcula grid. Comencemos con las propiedades que se aplican al elemento contenedor (padre<\/em>).<\/p>\n","protected":false},"excerpt":{"rendered":"
    Manejo de Flexbox Antes de comenzar con Grid CSS, quiz\u00e1s ser\u00eda importante dominar el sistema Flexbox, ya que Grid toma la filosof\u00eda y…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1519","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":"Manejo de Flexbox Antes de comenzar con Grid CSS, quiz\u00e1s ser\u00eda importante dominar el sistema Flexbox, ya que Grid toma la filosof\u00eda y...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1519","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=1519"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1519\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1519\/revisions\/1521"}],"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=1519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}