{"id":28079,"date":"2019-10-30T00:56:00","date_gmt":"2019-10-29T23:56:00","guid":{"rendered":"https:\/\/blexin.com\/?p=28079"},"modified":"2021-01-13T09:40:23","modified_gmt":"2021-01-13T08:40:23","slug":"layout-web-con-css-grid","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/","title":{"rendered":"Layout web con CSS Grid"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Introduzione<\/h2>\n\n\n\n

Correva l\u2019anno 2009 e, dopo il lungo periodo di transizione che ci separava dall\u2019utilizzo delle tabelle e la nascita dei fogli di stile, la parentesi \u201cFlash e Silverlight\u201d era in via di chiusura. Bisognava, quindi, trovare nuove strade per poter sviluppare layout web accattivanti in maniera agevole. Nuovi strumenti iniziavano a farsi strada: i Framework CSS Blueprint CSS<\/strong>, YUI Grids<\/strong> ed il famosissimo 960 Grid System<\/strong> (960gs<\/strong> per gli amici).<\/p>\n\n\n\n

Tutti portavano nel mondo del web design il concetto di \u201cgriglia\u201d, ripreso direttamente dal mondo della grafica editoriale per la stampa. Il resto della storia \u00e8 noto: con l\u2019avvento del responsive design sono nati nuovi framework, come Bootstrap<\/strong>, Foundation<\/strong>, UI Kit<\/strong>, Skeleton<\/strong>, Pure.css<\/strong> ed altri dotati di un sistema a griglia fluida, in grado di adattarsi ai display degli innumerevoli dispositivi presenti sul mercato.<\/p>\n\n\n\n

L\u2019esigenza \u00e8 chiara: per progettare le interfacce per il web, abbiamo bisogno di una griglia flessibile.<\/p>\n\n\n\n

L\u2019impiego dei Framework CSS implica, per\u00f2, un utilizzo massiccio di elementi di markup puramente strutturali inseriti direttamente nell\u2019HTML, che sporcano di fatto il codice. Non vi ricorda un po\u2019 il sistema utilizzato per costruire i layout con le tabelle? L\u2019uso improprio del tag \u201ctable\u201d \u00e8 stato uno dei tanti motivi che hanno portato poi alla nascita dei fogli di stile.
Per far fronte al problema dell\u2019utilizzo eccessivo dei Framework, nasce\u00a0Grid Layout<\/strong>\u00a0ed \u00e8 la prima volta in assoluto che un modulo CSS viene creato esclusivamente per la gestione della UI. Infatti, nessuna delle tecnologie presenti nelle specifiche precedenti era stata pensata per la costruzione di interfacce web: tutte le soluzioni erano frutto di ingegnosi hack, in grado di soddisfare svariate esigenze.<\/p>\n\n\n\n

La propriet\u00e0 float, ad esempio, era nata per fare in modo che le foto potessero \u201cgalleggiare\u201d all\u2019interno dei blocchi di testo, anche se per anni \u00e8 stato utilizzato (e lo \u00e8 ancora) per costruire i layout basati su elementi flottanti (float left o right) e relativi reset (clear left, right o both). Purtroppo, per\u00f2, ogni browser interpretava la propriet\u00e0 in modo differente. Inoltre, era tipico l\u2019utilizzo della propriet\u00e0 overflow: hidden<\/strong> o dell\u2019ingegnosa classe .clearfix<\/strong>, per risolvere il bug degli sfondi \u201cghigliottinati”  (https:\/\/complexspiral.com\/publications\/containing-floats\/<\/a>).<\/p>\n\n\n\n

Poi \u00e8 arrivato Flexbox e ha portato con s\u00e9 una serie di novit\u00e0 e strumenti in grado di risolvere molte delle problematiche legate alla UI. Sfortunatamente, per\u00f2, \u00e8 stato pensato per gestire strutture monodimensionali: per quelle bidimensionali, invece, bisogna ricorrere a CSS Grid<\/strong>.<\/p>\n\n\n\n

CSS Grid <\/strong>fu presentato al W3C nel 2011 da Phil Cupp (qui il link della prima working draft: https:\/\/www.w3.org\/TR\/2011\/WD-css3-grid-layout-20110407\/<\/a>), in quel periodo a capo del team di UI per lo sviluppo del nuovo \u201cMicrosoft Intune\u201d. Il suo obiettivo era quello di riuscire a portare nella specifica CSS uno dei moduli pi\u00f9 interessanti di Silverlight: il Grid Layout<\/strong>.
In precedenza, anche altri sviluppatori avevano inviato al W3C delle proposte di Grid, ma quella presentata da Phil Cupp e il suo team si basava su qualcosa di gi\u00e0 testato e funzionante su Silverlight, quindi bisognava solo adattarla. La sua specifica, che fu poi implementata in IE10 tramite il vendor prefix -ms-, \u00e8 stata successivamente revisionata, migliorata e riscritta grazie al contributo di altri sviluppatori.
Una video-intervista ai protagonisti che hanno realizzato CSS Grid <\/strong>\u00e8 disponibile a questo link: https:\/\/channel9.msdn.com\/Blogs\/msedgedev\/Creating-CSS-Grid<\/a>.<\/p>\n\n\n\n

Uno dei pi\u00f9 grandi vantaggi dell\u2019utilizzo di CSS Grid<\/strong> \u00e8 innanzitutto il supporto per la realizzazione di layout bidimensionali, e poi la possibilit\u00e0 di apportare le modifiche strutturali direttamente nel foglio di stile, senza necessariamente stravolgere il markup HTML.
Andiamo subito a toccare con mano le grandi potenzialit\u00e0 di CSS Grid<\/strong>.<\/p>\n\n\n\n

Primi passi<\/h2>\n\n\n\n

Useremo la metodologia BEM per denominare le classi assegnate ai vari elementi e Sass (SCSS) per scrivere il nostro CSS. Per il rendering utilizzeremo Firefox, perch\u00e9 attualmente \u00e8 l\u2019unico browser che, tramite il tool \u201cispeziona elemento\u201d, permette di visualizzare la numerazione assegnata alle righe.<\/p>\n\n\n\n

Partiamo da questo esempio di codice:<\/p>\n\n\n

\n<div class="wrapper">\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 1<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 2<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 3<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 4<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 5<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="box">Box 6<\/div>\n<\/div> \n<\/pre><\/div>\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0background: #ddd;\n\u00a0\u00a0\u00a0\u00a0width: 900px;\n\u00a0\u00a0\u00a0\u00a0margin: auto;\n}\n\u00a0\u00a0\n.box {\n\u00a0\u00a0\u00a0\u00a0padding: 15px;\n\u00a0\u00a0\u00a0\u00a0outline: 1px solid #000;\n}\n<\/pre><\/div>\n\n\n
In questo caso, abbiamo definito un div con classe\u00a0.wrapper<\/strong>\u00a0con al suo interno dei box nidificati. Vogliamo ottenere un template costituito da 2 righe con altezza fissa pari a 150 px e 3 colonne, ciascuna colonna dovr\u00e0 essere larga 300px:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In un framework tipo\u00a0Boostrap<\/strong>, avremmo dovuto inserire degli elementi strutturali come\u00a0.row<\/strong>\u00a0e\u00a0.col-*<\/strong>\u00a0per definire la griglia. Con\u00a0CSS Grid,<\/strong>\u00a0invece, baster\u00e0 semplicemente assegnare la propriet\u00e0\u00a0display: grid<\/strong>\u00a0all\u2019elemento con la classe\u00a0.wrapper<\/strong>:<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0background: #ddd;\n\u00a0\u00a0\u00a0\u00a0width: 900px;\n\u00a0\u00a0\u00a0\u00a0margin: auto;\n\u00a0\u00a0\u00a0\u00a0display: grid;\n}\n<\/pre><\/div>\n\n\n
Andremo adesso a definire una larghezza di 300px per ciascuna colonna. Per farlo, utilizzeremo la propriet\u00e0\u00a0grid-template-columns<\/strong>\u00a0e per ottenere 3 colonne dovremo scrivere lo stesso valore per 3 volte consecutive, come in questo esempio:<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: 300px 300px 300px;\n}\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
La riga ha un\u2019altezza di default impostata su\u00a0auto<\/strong>\u00a0e si adatter\u00e0 in base al contenuto. Se invece vogliamo stabilire un valore fisso, utilizzeremo la propriet\u00e0\u00a0grid-template-rows<\/strong>:<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: 300px 300px 300px;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 300px 100px;\n}\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
In questo caso, per la prima riga abbiamo stabilito un\u2019altezza di 300px, 100px per la seconda. Per ottenere invece 2 righe della stessa altezza, anche in questo caso, scriveremo lo stesso valore 2 volte:<\/p>\n\n\n
\ngrid-template-rows: 150px 150px;\n<\/pre><\/div>\n\n\n
Per evitare di inserire pi\u00f9 volte lo stesso valore, possiamo utilizzare la funzione\u00a0repeat<\/strong>. Seguendo questa formula possiamo definire altezza e larghezza delle colonne:<\/p>\n\n\n\n
repeat<\/strong>(\u00a0[<\/strong>numero colonne o righe]<\/strong>,\u00a0[<\/strong>altezza o larghezza]<\/strong>);<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 300px);\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: repeat(2, 150px);\n}\n<\/pre><\/div>\n\n\n
Se impostiamo un\u2019altezza fissa per le prime 2 righe, per le eventuali altre in aggiunta l\u2019altezza sar\u00e0 automatica:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Grazie a questa formula, invece, possiamo stabilire una larghezza uguale e ripetuta per le prime due colonne (200px), invece la terza colonna sar\u00e0 pi\u00f9 stretta (100px):<\/p>\n\n\n
\ngrid-template-columns: repeat(2, 200px) 100px;\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Se invece volessimo far occupare all\u2019ultima colonna tutto lo spazio disponibile, la specifica CSS Grid<\/strong> ci offre una nuova unit\u00e0 di misura relativa: la frazione (fr)<\/strong>.<\/p>\n\n\n\n
Quindi la nostra formula sar\u00e0 trasformata in:<\/p>\n\n\n
\ngrid-template-columns: repeat(2, 200px) 1fr;\n<\/pre><\/div>\n\n\n
dove l\u2019ultimo valore (1fr<\/strong>)\u00a0 \u00e8 relativo, si adatta quindi allo spazio disponibile.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Possiamo allora utilizzare la stessa soluzione per fare in modo che la larghezza di\u00a0tutte<\/strong>\u00a0le colonne si adatti automaticamente a quella del contenitore padre:<\/p>\n\n\n
\ngrid-template-columns: repeat(3, 1fr);\n<\/pre><\/div>\n\n\n
Per impostare un\u2019altezza fissa a tutte le righe, anche quelle che vengono generate dinamicamente, al posto di\u00a0grid-template-rows<\/strong>, possiamo utilizzare la propriet\u00e0\u00a0grid-auto-rows<\/strong>, come nel seguente esempio:<\/p>\n\n\n
\ngrid-auto-rows: 150px;\n<\/pre><\/div>\n\n\n
In questo caso, il valore numerico dovr\u00e0 essere definito una sola volta. Ecco il risultato:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Il codice CSS sar\u00e0 quindi il seguente:<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr);\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 150px;\n}\n<\/pre><\/div>\n\n\n
Possiamo utilizzare le frazioni anche sulle row, ma dobbiamo definire un\u2019altezza fissa per l\u2019elemento\u00a0.wrapper<\/strong>:<\/p>\n\n\n
\n.wrapper {\n\u00a0\u00a0\u00a0\u00a0height: 900px;\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr);\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 1fr;\n}\n<\/pre><\/div>\n\n\n
Nel prossimo articolo vedremo come realizzare il nostro primo layout con CSS Grid, andando ad analizzare le grandi potenzialit\u00e0 di questo approccio.<\/p>\n\n\n\n
Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
Vediamo come semplificare la nostra vita da front-end developer con CSS Grid<\/p>\n","protected":false},"author":196716237,"featured_media":28080,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637455],"class_list":["post-28079","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-css"],"yoast_head":"\nLayout web con CSS Grid - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout web con CSS Grid - Blexin\" \/>\n<meta property=\"og:description\" content=\"Vediamo come semplificare la nostra vita da front-end developer con CSS Grid\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-29T23:56:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carmine Alfano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carmine Alfano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/\"},\"author\":{\"name\":\"Carmine Alfano\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"headline\":\"Layout web con CSS Grid\",\"datePublished\":\"2019-10-29T23:56:00+00:00\",\"dateModified\":\"2021-01-13T08:40:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/\"},\"wordCount\":1096,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/\",\"name\":\"Layout web con CSS Grid - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-10-29T23:56:00+00:00\",\"dateModified\":\"2021-01-13T08:40:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/layout-web-con-css-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout web con CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\",\"name\":\"Carmine Alfano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"caption\":\"Carmine Alfano\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/razzullo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Layout web con CSS Grid - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/","og_locale":"it_IT","og_type":"article","og_title":"Layout web con CSS Grid - Blexin","og_description":"Vediamo come semplificare la nostra vita da front-end developer con CSS Grid","og_url":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/","og_site_name":"Blexin","article_published_time":"2019-10-29T23:56:00+00:00","article_modified_time":"2021-01-13T08:40:23+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Carmine Alfano","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Carmine Alfano","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/"},"author":{"name":"Carmine Alfano","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"headline":"Layout web con CSS Grid","datePublished":"2019-10-29T23:56:00+00:00","dateModified":"2021-01-13T08:40:23+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/"},"wordCount":1096,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","keywords":["CSS"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/","url":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/","name":"Layout web con CSS Grid - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","datePublished":"2019-10-29T23:56:00+00:00","dateModified":"2021-01-13T08:40:23+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/layout-web-con-css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Layout web con CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6","name":"Carmine Alfano","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","caption":"Carmine Alfano"},"url":"https:\/\/blexin.com\/it\/author\/razzullo\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9bf31097-d4b2-41b4-b7f4-e73e8d06e864.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7iT","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716237"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=28079"}],"version-history":[{"count":9,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28079\/revisions"}],"predecessor-version":[{"id":28105,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28079\/revisions\/28105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/28080"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=28079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=28079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=28079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}