{"id":27983,"date":"2019-12-04T00:00:00","date_gmt":"2019-12-03T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/il-nostro-primo-layout-con-css-grid\/"},"modified":"2021-05-20T18:47:20","modified_gmt":"2021-05-20T16:47:20","slug":"our-first-layout-with-css-grid","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/","title":{"rendered":"Our first layout with CSS Grid"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In the previous article, we have seen how to create a grid using two simple properties. In the next examples, we will put into practice the high potentiality of CSS Grid<\/strong>.
Using the Firefox development tool, we analyze the \u201cbehind the scene\u201d of the markup that we previously created. To display the grid correctly, we should select the .wrapper<\/strong> and check \u201cDisplay line numbers\u201d, \u201cDisplay area names\u201d, and \u201cExtend lines infinitely\u201d .<\/p>\n\n\n\n

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

We are going to use the following layout:<\/p>\n\n\n\n

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

We will refer to the following markup:<\/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
Let\u2019s define the grid element and basic styles for all the elements contained in it:<\/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
We define then a style for rows, paying attention to the five elements nested in the .container<\/strong>: header, navbard, content, sidebar, footer.
The CSS rule would be:<\/p>\n\n\n
\ngrid-template-rows: 100px 50px 500px 80px;\n<\/pre><\/div>\n\n\n
Values assigned to the rows height would be:<\/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
    To be noted: values are 4 and 5 because .content<\/strong> and .sidebar<\/strong> are placed inside the same row.
    We could define a height for any element, instead of using the property grid-template-rows<\/strong>. The unfavorable result will be the inability to control the height of each component, using only one line of code.<\/p>\n\n\n\n
    Let\u2019s define the template for the columns. In this specific case, the quantity makes no difference, and we will then create a template with four columns:<\/p>\n\n\n\n
    • 3 columns from 1 fraction<\/li>
    • 1 column with a fixed width (300px), where we put the sidebar<\/strong>:<\/li><\/ul>\n\n\n
      \ngrid-template-columns: repeat(3, 1fr) 300px;\n<\/pre><\/div>\n\n\n
      The final SCSS code will be as follows:<\/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
      Let\u2019s activate the Firefox inspector<\/em> and look at the grid: we will note that all elements are organized as a sequence inside it. We will refer to row numbers to rightly arrange them.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      As we have seen before, we can create a new grid-container<\/strong> with the rule display: grid<\/strong>, and we can create rows and columns with the rules grid-template-rows<\/strong> and grid-template-columns<\/strong>. We obtained a flexible container, precisely as in Flexbox.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Dashed horizontal rows are called row line<\/strong>, vertical ones columns line<\/strong>, the area between two rows is called grid-track<\/strong>: it can be row or column type depending on direction.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      The single element between column line<\/em> and row line<\/em> is called grid cell<\/strong>, groups of cells are called grid area<\/strong>. All entities inside the grid are named grid item<\/strong>.<\/p>\n\n\n\n
      In order to let .header<\/strong> occupies all columns in width, we will use the following rule:<\/p>\n\n\n
      \n.header {\n\u00a0\u00a0\u00a0\u00a0grid-column: 1 \/ -1;\n}\n<\/pre><\/div>\n\n\n
      With this syntax, we define that the .header<\/strong> element should occupy the space between column-line \u201c1\u201d<\/strong> (start) and column-line \u201c-1\u201d<\/strong> (end). Why we wrote \u201c-1\u201d and not \u201c5\u201d? Look at the following screenshot: you can see that the value 5 <\/strong>corresponds to the value -1<\/strong> (yellow highlighted), if we would increase the number of columns from 4 to 5, the value of the last column line<\/strong> would be 6<\/strong> (and not 5), whereas the corresponding value (-1)<\/strong> would not change. If we declare the property \u201cgrid-column: 1 \/ -1\u201d, then, we are setting the element .header<\/strong> to occupy the space between the beginning and the end of the grid always and however:<\/p>\n\n\n\n
      Now we have to define the rules for remaining elements. Please note that .content<\/strong> will occupy the space between the column-line 1<\/strong> and the column-line-2<\/strong>, but there are no rules set for the sidebar since it will occupy the remaining space:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Now we have to define the rules for remaining elements. Please note that .content<\/strong> will occupy the space between the column-line 1<\/strong> and the column-line-2<\/strong>, but there are no rules set for the sidebar since it will occupy the remaining space:<\/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
      If we want to add blocks inside .content<\/strong>, we should transform this last in a grid<\/strong> too:<\/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
      The result would be:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      We used the property:<\/p>\n\n\n
      \ngap: 20px;\n<\/pre><\/div>\n\n\n
      it is a shorthand<\/em> to define the same spacing between rows and columns. Extended properties are:<\/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
      In the next article we will analyze CSS Grid best practices and we will compare it with flexbox.<\/p>\n\n\n\n
      See you at the next article!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
      We have examined CSS Grid fundamentals, now let\u2019s see how to create our first layout<\/p>\n","protected":false},"author":196716237,"featured_media":27955,"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_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","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":[688637524],"tags":[688637456],"class_list":["post-27983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-css-en"],"yoast_head":"\nOur first layout with 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\/en\/blog-en\/our-first-layout-with-css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our first layout with CSS Grid - Blexin\" \/>\n<meta property=\"og:description\" content=\"We have examined CSS Grid fundamentals, now let\u2019s see how to create our first layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-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-05-20T16:47: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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carmine Alfano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/\"},\"author\":{\"name\":\"Carmine Alfano\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"headline\":\"Our first layout with CSS Grid\",\"datePublished\":\"2019-12-03T23:00:00+00:00\",\"dateModified\":\"2021-05-20T16:47:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/\"},\"wordCount\":718,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/\",\"name\":\"Our first layout with CSS Grid - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-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-05-20T16:47:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/our-first-layout-with-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\\\/en\\\/blog-en\\\/our-first-layout-with-css-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Our first layout with CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\",\"name\":\"Carmine Alfano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\\\/en\\\/author\\\/razzullo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our first layout with 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\/en\/blog-en\/our-first-layout-with-css-grid\/","og_locale":"en_US","og_type":"article","og_title":"Our first layout with CSS Grid - Blexin","og_description":"We have examined CSS Grid fundamentals, now let\u2019s see how to create our first layout","og_url":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/","og_site_name":"Blexin","article_published_time":"2019-12-03T23:00:00+00:00","article_modified_time":"2021-05-20T16:47: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":{"Written by":"Carmine Alfano","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/"},"author":{"name":"Carmine Alfano","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"headline":"Our first layout with CSS Grid","datePublished":"2019-12-03T23:00:00+00:00","dateModified":"2021-05-20T16:47:20+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/"},"wordCount":718,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-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":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/","url":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/","name":"Our first layout with CSS Grid - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-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-05-20T16:47:20+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/our-first-layout-with-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\/en\/blog-en\/our-first-layout-with-css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Our first layout with CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6","name":"Carmine Alfano","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/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-7hl","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/27983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716237"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=27983"}],"version-history":[{"count":7,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/27983\/revisions"}],"predecessor-version":[{"id":31174,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/27983\/revisions\/31174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/27955"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=27983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=27983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=27983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}