{"id":27929,"date":"2019-12-11T00:00:00","date_gmt":"2019-12-10T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=27929"},"modified":"2021-01-13T09:40:19","modified_gmt":"2021-01-13T08:40:19","slug":"css-grid-best-practices","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/","title":{"rendered":"CSS Grid: Best Practices"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" data-attachment-id=\"27932\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/attachment\/image00-18\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&amp;ssl=1\" data-orig-size=\"1024,608\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image00-18\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=300%2C178&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?resize=1024%2C608&#038;ssl=1\" alt=\"\" class=\"wp-image-27932\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18-980x582.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18-480x285.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p>Negli esempi precedenti, abbiamo visto come costruire i layout prendendo come riferimento i valori numerici assegnati alle linee. Adesso vedremo alcune Best Practices per semplificare il lavoro.<br>Il primo metodo consiste nel definire dei nomi da assegnare ai template delle colonne ed eventualmente alle righe:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.container {\ndisplay: grid;\ngrid-template-rows: 100px 50px 300px 80px;\ngrid-template-columns: repeat(3, &#x5B;container-start] 1fr) 300px &#x5B;container-end];\n}\n<\/pre><\/div>\n\n\n<p>In questo modo, invece dei numeri possiamo utilizzare i nomi che abbiamo stabilito:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: container-start \/ container-end;\n}\n<\/pre><\/div>\n\n\n<p>L\u2019ultimo approccio prevede l\u2019assegnazione di nomi alle aree: \u00e8 un metodo a mio parere non molto flessibile, che poco si adatta ai progetti pi\u00f9 grandi.<br>Attraverso la propriet\u00e0:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ngrid-template-areas\n<\/pre><\/div>\n\n\n<p>assegner\u00f2 i nomi alle aree che, come abbiamo visto in precedenza, sono costituite da gruppi di celle. Ad esempio, per definire il template per\u00a0<strong>.header<\/strong>, nel selettore\u00a0<strong>.container<\/strong>\u00a0assegner\u00f2 il nome dell\u2019area raggruppando quattro celle:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ngrid-template-areas: &quot;header header header header&quot;\n<\/pre><\/div>\n\n\n<p>Invece, richiamer\u00f2 il template dell\u2019area dedicata al selettore di\u00a0<strong>.header<\/strong>\u00a0attraverso la propriet\u00e0:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ngrid-area: header;\n<\/pre><\/div>\n\n\n<p>Ecco l\u2019esempio completo:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\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\u00a0\u00a0grid-template-areas: &quot;header header header header&quot;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;navbar navbar navbar navbar&quot;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;content content content sidebar&quot;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&quot;footer footer footer footer&quot;;\n}\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-area: header;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-area: navbar;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-area: content;\n}\n.sidebar {\n\u00a0\u00a0\u00a0\u00a0grid-area: sidebar;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-area: footer;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Come adattare la griglia ai dispositivi mobili senza ricorrere alle media queries<\/h2>\n\n\n\n<p>Partiamo dal seguente markup e dal suo relativo foglio di stile:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px auto 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(3, 1fr) 300px;\n}\n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n.navbar {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\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&amp;__item {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: orange;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n<\/pre><\/div>\n\n\n<p>Da notare che abbiamo assegnato il valore\u00a0<em>auto<\/em>\u00a0per definire l\u2019altezza della riga contenente il\u00a0<strong>.content<\/strong>\u00a0e la\u00a0<strong>.sidebar<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ngrid-template-rows: 100px 50px auto 80px;\n<\/pre><\/div>\n\n\n<p>Questo espediente far\u00e0 in modo che l\u2019altezza del blocco si possa adattare alla quantit\u00e0 di contenuti presenti in esso.<br>L\u2019obiettivo sar\u00e0 quello di posizionare la\u00a0<strong>.sidebar<\/strong>\u00a0sotto al\u00a0<strong>.content<\/strong>\u00a0nella versione mobile, e di far posizionare i blocchi contenuti da\u00a0<strong>.content<\/strong>\u00a0in base alla larghezza.<br>Modifichiamo adesso la propriet\u00e0\u00a0<strong>grid-template-columns<\/strong>.<br>Non specificheremo pi\u00f9 la quantit\u00e0 di colonne (3), ma utilizzeremo la propriet\u00e0\u00a0<strong>auto-fit<\/strong>\u00a0che generer\u00e0 in automatico le tracce in base allo spazio disponibile:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\ngrid-template-columns: repeat(3, 1fr) 300px;\ngrid-template-columns: repeat(auto-fit, 1fr) 300px;\n<\/pre><\/div>\n\n\n<p>Inoltre, grazie alla funzione\u00a0<strong>minmax<\/strong>, specificheremo una\u00a0<strong>larghezza minima<\/strong>\u00a0(300px) e\u00a0<strong>una massima<\/strong>\u00a0(1fr): quindi, sui display pi\u00f9 piccoli la larghezza della colonna sar\u00e0 di 300px, mentre su quelli pi\u00f9 grandi sar\u00e0 di 1fr.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* grid-template-columns: repeat(auto-fit, 1fr) 300px; *\/\ngrid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n<\/pre><\/div>\n\n\n<p>Abbiamo inoltre rinunciato alla definizione della larghezza fissa per la\u00a0<strong>.sidebar<\/strong>, che di fatto conserver\u00e0 la posizione, perch\u00e9 in precedenza avevamo stabilito che il\u00a0<strong>.content<\/strong>\u00a0avrebbe dovuto occupare lo spazio compreso tra la linea\u00a0<strong>1<\/strong>\u00a0e la<strong>\u00a0-2<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.content {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -2;\n}\n<\/pre><\/div>\n\n\n<p>Per quanto riguarda invece i blocchi contenuti in\u00a0<strong>.content<\/strong>, andremo anche qui ad eliminare il numero specifico di colonne in favore della funzione\u00a0<strong>auto-fit<\/strong>\u00a0e della definizione di una larghezza minima e una massima:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* grid-template-columns: repeat(3, 1fr); *\/\ngrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n<\/pre><\/div>\n\n\n<p>Il codice definitivo sar\u00e0 quindi il seguente:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.container {\n\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-rows: 100px 50px auto 80px;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&amp;&gt;* {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #5c5c5c;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 10px;\n\u00a0\u00a0\u00a0\u00a0}\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\u00a0\u00a0\u00a0\u00a0display: grid;\n\u00a0\u00a0\u00a0\u00a0grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n\u00a0\u00a0\u00a0\u00a0grid-auto-rows: 125px;\n\u00a0\u00a0\u00a0\u00a0gap: 20px;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&amp;__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.sidebar {\n\u00a0\u00a0\u00a0\u00a0background: orangered;\n}\n.footer {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n\u00a0\u00a0\u00a0\u00a0background: brown;\n}\n<\/pre><\/div>\n\n\n<p>Questo \u00e8 il risultato che abbiamo ottenuto:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" data-attachment-id=\"27939\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/attachment\/grid-17\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17.gif?fit=1265%2C718&amp;ssl=1\" data-orig-size=\"1265,718\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"grid-17\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17.gif?fit=300%2C170&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17.gif?fit=1024%2C581&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17.gif?resize=1024%2C581&#038;ssl=1\" alt=\"\" class=\"wp-image-27939\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17-1024x581.gif 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17-980x556.gif 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-17-480x272.gif 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Flexbox vs CSS Grid<\/h2>\n\n\n\n<p>La domanda che spesso sorge spontanea \u00e8: ma adesso che fine far\u00e0 Flexbox?<br>In realt\u00e0, i due moduli possono essere tranquillamente utilizzati in combo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Con&nbsp;<strong>CSS Grid<\/strong>&nbsp;realizzeremo tutta la struttura portante del layout e andremo invece a definire la UI di elementi che richiedono la gestione simultanea del posizionamento sui due assi x e y;<\/li><li><strong>Flexbox<\/strong>, invece, \u00e8 pi\u00f9 adatto alla gestione di un singolo asse per volta (ad esempio: men\u00f9 di navigazione, liste verticali o orizzontali, ecc)<\/li><\/ul>\n\n\n\n<p>Per approfondire la questione, vi lascio il\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/drafts.csswg.org\/css-grid\/#intro\" target=\"_blank\">link<\/a>\u00a0della specifica w3c, dove proprio nell\u2019introduzione si parla della differenza tra i due moduli.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"408\" data-attachment-id=\"27942\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/attachment\/grid-18\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18.png?fit=804%2C408&amp;ssl=1\" data-orig-size=\"804,408\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"grid-18\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18.png?fit=300%2C152&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18.png?fit=804%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18.png?resize=804%2C408&#038;ssl=1\" alt=\"\" class=\"wp-image-27942\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18.png 804w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/grid-18-480x244.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 804px, 100vw\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">In conclusione<\/h2>\n\n\n\n<p>Ci sarebbe ovviamente tanto altro da vedere, perch\u00e9 la specifica<strong>\u00a0CSS Grid<\/strong>\u00a0\u00e8 molto vasta e in continua evoluzione, ma con le tecniche che abbiamo analizzato in questa serie di articoli saremo gi\u00e0 in grado di realizzare dei layout grazie a\u00a0<strong>CSS Grid<\/strong>!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Vediamo quali sono le Best Practices nell\u2019uso di CSS Grid e che fine far\u00e0 Flexbox<\/p>\n","protected":false},"author":196716237,"featured_media":27932,"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":"","inline_featured_image":false,"jetpack_post_was_ever_published":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}},"categories":[688637374],"tags":[688637455],"class_list":["post-27929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Grid: Best Practices - 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\/css-grid-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid: Best Practices - Blexin\" \/>\n<meta property=\"og:description\" content=\"Vediamo quali sono le Best Practices nell\u2019uso di CSS Grid e che fine far\u00e0 Flexbox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-10T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.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\":\"WebPage\",\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/\",\"url\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/\",\"name\":\"CSS Grid: Best Practices - Blexin\",\"isPartOf\":{\"@id\":\"https:\/\/blexin.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-12-10T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:19+00:00\",\"author\":{\"@id\":\"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blexin.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Grid: Best Practices\"}]},{\"@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:\/\/blexin.com\/it\/#\/schema\/person\/image\/\",\"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":"CSS Grid: Best Practices - 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\/css-grid-best-practices\/","og_locale":"it_IT","og_type":"article","og_title":"CSS Grid: Best Practices - Blexin","og_description":"Vediamo quali sono le Best Practices nell\u2019uso di CSS Grid e che fine far\u00e0 Flexbox","og_url":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/","og_site_name":"Blexin","article_published_time":"2019-12-10T23:00:00+00:00","article_modified_time":"2021-01-13T08:40:19+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.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":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/","url":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/","name":"CSS Grid: Best Practices - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1","datePublished":"2019-12-10T23:00:00+00:00","dateModified":"2021-01-13T08:40:19+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image00-18.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/css-grid-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"CSS Grid: Best Practices"}]},{"@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:\/\/blexin.com\/it\/#\/schema\/person\/image\/","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-18.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7gt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27929","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=27929"}],"version-history":[{"count":9,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27929\/revisions"}],"predecessor-version":[{"id":27946,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/27929\/revisions\/27946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/27932"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=27929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=27929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=27929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}