{"id":27952,"date":"2019-12-04T00:00:00","date_gmt":"2019-12-03T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=27952"},"modified":"2021-01-13T09:40:20","modified_gmt":"2021-01-13T08:40:20","slug":"il-nostro-primo-layout-con-css-grid","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/","title":{"rendered":"Il nostro primo layout con CSS Grid"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Nel precedente articolo, abbiamo visto come realizzare una griglia utilizzando due semplici propriet\u00e0. Negli esempi che seguono, metteremo in pratica le vere, grandi potenzialit\u00e0 di CSS Grid<\/strong>.
Tramite il tool di sviluppo di Firefox, andiamo innanzitutto a sbirciare dietro le quinte del markup realizzato precedentemente. Per visualizzare correttamente la griglia bisogner\u00e0 selezionare il .wrapper<\/strong>, e spuntare le caselle: \u201cvisualizza numeri di riga\u201d, \u201cvisualizza nomi aree\u201d, \u201cestendi linee all\u2019infinito\u201d.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Il layout che realizzeremo \u00e8 questo:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Il markup a cui faremo riferimento \u00e8 il seguente:<\/p>\n\n\n

\n<div class="container">\n<header class="header">Header<\/header>\n<nav class="navbar">Navbar<\/nav>\n<section class="content">Content<\/section>\n<aside class="sidebar">Lorem ipsum... <\/aside>\n<footer class="footer">Footer<\/footer>\n<\/div>\n<\/pre><\/div>\n\n\n
Definiamo l\u2019elemento griglia e gli stili di base per tutti gli elementi in esso contenuti:<\/p>\n\n\n
\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0&>* {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #ffffff;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
Stabiliremo, quindi, uno stile per le righe, considerando i 5 elementi nidificati nel .container<\/strong>: header, navbar, content, sidebar, footer.
La regola CSS sar\u00e0 la seguente:<\/p>\n\n\n
\ngrid-template-rows: 100px 50px 500px 80px;\n<\/pre><\/div>\n\n\n
I valori assegnati all\u2019altezza delle righe saranno i seguenti:<\/p>\n\n\n\n
  • I valore \u201c100px\u201d = Header<\/li>
  • II valore \u201c50px\u201d = Navbar<\/li>
  • III valore \u201c300px\u201d = Content \/ Sidebar<\/li>
  • IV valore \u201c80px\u201d = Footer<\/li><\/ul>\n\n\n\n
    Da notare che i valori sono 4 e non 5, questo perch\u00e9 .content<\/strong> e .sidebar<\/strong> sono disposti all\u2019interno della medesima riga.
    In realt\u00e0, invece di utilizzare la propriet\u00e0 grid-template-rows<\/strong>, potremmo definire un\u2019altezza per ogni elemento. Lo svantaggio sarebbe, per\u00f2, l\u2019impossibilit\u00e0 di controllare l\u2019altezza di ciascun elemento sfruttando una singola riga di codice.<\/p>\n\n\n\n
    Definiamo il template per le colonne. In questo caso specifico, la scelta della quantit\u00e0 \u00e8 indifferente, scegliamo quindi di realizzare un template a 4 colonne:<\/p>\n\n\n\n
    • 3 colonne da 1 frazione<\/li>
    • 1 colonna a larghezza fissa (300px) dove sar\u00e0 allocata la sidebar<\/strong>:<\/li><\/ul>\n\n\n
      \ngrid-template-columns: repeat(3, 1fr) 300px;\n<\/pre><\/div>\n\n\n
      Il codice SCSS definitivo sar\u00e0 quindi il seguente:<\/p>\n\n\n
      \n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px 300px 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr) 300px;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&>* {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #ffffff;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
      Attiviamo l\u2019inspector<\/em> di Firefox e osserviamo la griglia: noteremo che tutti gli elementi si sono disposti in sequenza all\u2019interno di essa. Adesso, per posizionarli nel modo corretto, faremo riferimento ai numeri di riga:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Come abbiamo potuto sperimentare in precedenza, possiamo creare un nuovo grid-container<\/strong> attraverso la regola display: grid<\/strong>. Con le regole grid-template-rows<\/strong> e grid-template-columns<\/strong> andremo poi a creare righe e colonne. Proprio come avviene in Flexbox, abbiamo ricavato un contenitore flessibile.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Le linee tratteggiate orizzontali prendono il nome di row line<\/strong>, quelle verticali invece prendono il nome di column line<\/strong>. L\u2019area compresa tra due linee viene chiamata grid-track<\/strong>, di tipo row o di tipo column a seconda della direzione.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Il singolo elemento compreso tra column line<\/em> e row line<\/em> viene chiamato grid cell<\/strong>, gruppi di pi\u00f9 celle invece vengono chiamate grid area<\/strong>. Tutte le entit\u00e0 presenti all\u2019interno della griglia prendono il nome di grid item<\/strong>.<\/p>\n\n\n\n
      Per fare in modo che .header<\/strong> occupi tutte le colonne in larghezza, utilizzeremo la seguente regola:<\/p>\n\n\n
      \n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n<\/pre><\/div>\n\n\n
      Con questa sintassi abbiamo stabilito che l\u2019elemento .header<\/strong> deve occupare uno spazio compreso tra la column-line \u201c1\u201d<\/strong> (inizio) e la column-line \u201c-1\u201d<\/strong> (fine). Perch\u00e9 abbiamo scritto \u201c-1\u201d e non \u201c5\u201d? Osservando il seguente screenshot, noteremo che il valore 5<\/strong>corrisponde al valore -1<\/strong>;(evidenziati in giallo), quindi se per un motivo qualsiasi aumentassimo il numero di colonne da 4 a 5, il valore dell\u2019ultima column line<\/strong> sarebbe 6<\/strong> (e non pi\u00f9 5) mentre il valore corrispondente (-1)<\/strong> resterebbe invariato. Quindi, dichiarando la propriet\u00e0 \u201cgrid-column: 1 \/ -1\u201d, stiamo dicendo all\u2019elemento .header<\/strong> di occupare sempre e comunque lo spazio compreso tra l\u2019inizio e la fine delle griglia:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Definiamo adesso le regole per gli altri elementi. Da notare che .content<\/strong> occuper\u00e0 lo spazio compreso tra la column-line 1<\/strong> e la column-line -2<\/strong>, mentre per la sidebar non sono state stabilite regole perch\u00e9 occuper\u00e0 implicitamente lo spazio restante:<\/p>\n\n\n
      \n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: coral;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: brown;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n\u00a0\u00a0\u00a0\u00a0background: gray;\n}\n\u00a0\u00a0\n.sidebar {\n\u00a0\u00a0\u00a0\u00a0background: orangered;\n}\n\u00a0\u00a0\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: brown;\n}\n<\/pre><\/div>\n\n\n
      Se invece vogliamo aggiungere dei blocchi all\u2019interno del .content<\/strong>, dobbiamo trasformare anche quest\u2019ultimo in una grid<\/strong>:<\/p>\n\n\n
      \n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n\u00a0\u00a0\u00a0\u00a0background: gray;\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr);\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 125px;\n\u00a0\u00a0\u00a0\u00a0gap: 20px;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&__item {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: orange;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #ffffff;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n
      \n<section class="content">\n<div class="content__item">block 1<\/div>\n<div class="content__item">block 2<\/div>\n<div class="content__item">block 3<\/div>\n<div class="content__item">block 4<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="content__item">block 5<\/div>\n<div class="content__item">block 6<\/div>\n<\/section>\n<\/pre><\/div>\n\n\n
      Il risultato ottenuto sar\u00e0 il seguente:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Da notare che abbiamo utilizzato la propriet\u00e0:<\/p>\n\n\n
      \ngap: 20px;\n<\/pre><\/div>\n\n\n
      si tratta di una shorthand<\/em> per definire la stessa spaziatura tra righe e colonne. Le propriet\u00e0 estese sono le seguenti:<\/p>\n\n\n
      \nrow-gap: 20px;\ncolumn-gap: 20px;\n<\/pre><\/div>\n\n\n
      \"\"<\/figure>\n\n\n\n
      Next Step<\/h2>\n\n\n\n
      Nel prossimo articolo analizzeremo le best practices di CSS Grid e faremo un confronto con flexbox.<\/p>\n\n\n\n
      Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
      Dopo aver analizzato i fondamenti di CSS Grid, vediamo come realizzare il nostro primo layout<\/p>\n","protected":false},"author":196716237,"featured_media":27954,"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-27952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-css"],"yoast_head":"\nIl nostro primo layout 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\/il-nostro-primo-layout-con-css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Il nostro primo layout con CSS Grid - Blexin\" \/>\n<meta property=\"og:description\" content=\"Dopo aver analizzato i fondamenti di CSS Grid, vediamo come realizzare il nostro primo layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-03T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.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=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/\"},\"author\":{\"name\":\"Carmine Alfano\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"headline\":\"Il nostro primo layout con CSS Grid\",\"datePublished\":\"2019-12-03T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/\"},\"wordCount\":684,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/image00-19.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/\",\"name\":\"Il nostro primo layout con CSS Grid - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/image00-19.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-12-03T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/image00-19.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/image00-19.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/il-nostro-primo-layout-con-css-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Il nostro primo layout 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":"Il nostro primo layout 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\/il-nostro-primo-layout-con-css-grid\/","og_locale":"it_IT","og_type":"article","og_title":"Il nostro primo layout con CSS Grid - Blexin","og_description":"Dopo aver analizzato i fondamenti di CSS Grid, vediamo come realizzare il nostro primo layout","og_url":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/","og_site_name":"Blexin","article_published_time":"2019-12-03T23:00:00+00:00","article_modified_time":"2021-01-13T08:40:20+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.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":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/"},"author":{"name":"Carmine Alfano","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"headline":"Il nostro primo layout con CSS Grid","datePublished":"2019-12-03T23:00:00+00:00","dateModified":"2021-01-13T08:40:20+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/"},"wordCount":684,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.png?fit=1024%2C608&ssl=1","keywords":["CSS"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/","url":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/","name":"Il nostro primo layout con CSS Grid - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.png?fit=1024%2C608&ssl=1","datePublished":"2019-12-03T23:00:00+00:00","dateModified":"2021-01-13T08:40:20+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-19.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/il-nostro-primo-layout-con-css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Il nostro primo layout 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\/image00-19.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7gQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27952","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=27952"}],"version-history":[{"count":11,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27952\/revisions"}],"predecessor-version":[{"id":28765,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27952\/revisions\/28765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/27954"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=27952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=27952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=27952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}