{"id":8411,"date":"2024-12-18T22:41:13","date_gmt":"2024-12-18T17:11:13","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8411"},"modified":"2024-12-18T22:41:17","modified_gmt":"2024-12-18T17:11:17","slug":"css-layouts-flexbox-and-grid","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/","title":{"rendered":"CSS Layouts: Flexbox and Grid"},"content":{"rendered":"\n

Introduction:<\/strong><\/p>\n\n\n\n

In modern web page design, creating responsive web pages and visually appealing layouts is very important. The layout management options available to satisfy both these conditions are Flexbox and Grid layout. Even though both help to design pages effectively, they are used in different scenarios. This blog explains the differences between flexbox and grid.<\/p>\n\n\n\n

Flexbox:<\/strong><\/p>\n\n\n\n

Flexbox is short form of flexible box. It is a one-dimensional layout model and control the alignments in a container. It can control either horizontally(row) or vertically(column).<\/p>\n\n\n\n

Common Properties:<\/strong><\/p>\n\n\n\n

Container<\/em><\/strong>:<\/p>\n\n\n\n

    \n
  1. display: flex<\/em> \u2013 the layout of a container is controlled by this.<\/li>\n\n\n\n
  2. flex-direction<\/em> (row or column) \u2013 the contents are arranged based on this.<\/li>\n\n\n\n
  3. flex-wrap<\/em>: allows items to wrap onto multiple lines.<\/li>\n\n\n\n
  4. justify-content<\/em>: controls horizontal alignment<\/li>\n\n\n\n
  5. align-items<\/em>: controls vertical alignment<\/li>\n<\/ol>\n\n\n\n

    Items:<\/em><\/strong><\/p>\n\n\n\n

      \n
    1. flex: flex-grow, flex-shrink, flex-basis<\/em> these properties are used to align the items.<\/li>\n\n\n\n
    2. align-self<\/em>: Overrides align-items for a specific item.<\/li>\n<\/ol>\n\n\n\n

      When can we use Flexbox?<\/strong><\/p>\n\n\n\n

        \n
      1. Align items either in a single row or column<\/li>\n\n\n\n
      2. Distributing the space between items dynamically.<\/li>\n\n\n\n
      3. Creating navigation bars, sidebars or card layouts.<\/li>\n<\/ol>\n\n\n\n

        Example:<\/strong><\/p>\n\n\n\n

        .flex-container {<\/p>\n\n\n\n

              display: flex;<\/p>\n\n\n\n

        flex-direction:column;<\/p>\n\n\n\n

              justify-content: space-around;<\/p>\n\n\n\n

              align-items: center;<\/p>\n\n\n\n

              gap: 10px;<\/p>\n\n\n\n

              padding: 20px;<\/p>\n\n\n\n

              border: 2px dashed #ddd;<\/p>\n\n\n\n

            }<\/p>\n\n\n\n

            .flex-item {<\/p>\n\n\n\n

              background-color: #4caf50;<\/p>\n\n\n\n

              color: white;<\/p>\n\n\n\n

              padding: 20px;<\/p>\n\n\n\n

              border-radius: 5px;<\/p>\n\n\n\n

              width: 80px;<\/p>\n\n\n\n

              height: 80px;<\/p>\n\n\n\n

              display: flex;<\/p>\n\n\n\n

              justify-content: center;<\/p>\n\n\n\n

              align-items: center;<\/p>\n\n\n\n

            }<\/p>\n\n\n\n

        <div class=”flex-container”><\/p>\n\n\n\n

            <div class=”flex-item”>1<\/div><\/p>\n\n\n\n

            <div class=”flex-item”>2<\/div><\/p>\n\n\n\n

            <div class=”flex-item”>3<\/div><\/p>\n\n\n\n

          <\/div><\/p>\n\n\n\n

        Output:<\/strong><\/p>\n\n\n\n

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

        Grid:<\/strong><\/p>\n\n\n\n

        CSS Grid is a two-dimensional layout system that creates layouts involving rows and columns.<\/p>\n\n\n\n

        Common Grid properties<\/strong><\/p>\n\n\n\n

        Container:<\/em><\/strong><\/p>\n\n\n\n

          \n
        1. display: grid<\/em> or display: inline-grid <\/em>\u2013 Align the container<\/li>\n\n\n\n
        2. grid-template-rows<\/em> or grid-template-columns<\/em> : Define the structure<\/li>\n\n\n\n
        3. gap<\/em>: add space between rows and columns<\/li>\n\n\n\n
        4. justify-items <\/em>and align-items<\/em> : Align items inside the cell.<\/li>\n<\/ol>\n\n\n\n

          Items:<\/em><\/strong><\/p>\n\n\n\n

            \n
          1. grid-column and grid-row: Control the span of an item across rows or columns.<\/li>\n\n\n\n
          2. place-self: aligns an individual item.<\/li>\n<\/ol>\n\n\n\n

            When can we use Grid?<\/strong><\/p>\n\n\n\n

              \n
            1. Creating layouts with rows and columns<\/li>\n\n\n\n
            2. Designing full page layout or complex structured layout like sidebar.<\/li>\n\n\n\n
            3. Structuring forms and image galleries.<\/li>\n<\/ol>\n\n\n\n

              Grid Advantages:<\/strong><\/p>\n\n\n\n

                \n
              1. Precise control over layout<\/li>\n\n\n\n
              2. Can easily create complex and responsive designs.<\/li>\n\n\n\n
              3. Ability to overlap and layer grid items.<\/li>\n\n\n\n
              4. Perfect for overall page layout.<\/li>\n<\/ol>\n\n\n\n

                Example:<\/strong><\/p>\n\n\n\n

                    .grid-container {<\/p>\n\n\n\n

                      display: grid;<\/p>\n\n\n\n

                      grid-template-columns: repeat(3, 1fr);<\/p>\n\n\n\n

                      gap: 15px;<\/p>\n\n\n\n

                      background-color: #e0e0e0;<\/p>\n\n\n\n

                      padding: 20px;<\/p>\n\n\n\n

                      border: 2px solid #ddd;<\/p>\n\n\n\n

                    }<\/p>\n\n\n\n

                    .grid-item {<\/p>\n\n\n\n

                      background-color: #2196f3;<\/p>\n\n\n\n

                      color: white;<\/p>\n\n\n\n

                      padding: 20px;<\/p>\n\n\n\n

                      border-radius: 5px;<\/p>\n\n\n\n

                      display: flex;<\/p>\n\n\n\n

                      justify-content: center;<\/p>\n\n\n\n

                      align-items: center;<\/p>\n\n\n\n

                    }<\/p>\n\n\n\n

                <h1>Grid Layout<\/h1><\/p>\n\n\n\n

                  <div class=”grid-container”><\/p>\n\n\n\n

                    <div class=”grid-item”>1<\/div><\/p>\n\n\n\n

                    <div class=”grid-item”>2<\/div><\/p>\n\n\n\n

                    <div class=”grid-item”>3<\/div><\/p>\n\n\n\n

                    <div class=”grid-item”>4<\/div><\/p>\n\n\n\n

                    <div class=”grid-item”>5<\/div><\/p>\n\n\n\n

                    <div class=”grid-item”>6<\/div><\/p>\n\n\n\n

                  <\/div><\/p>\n\n\n\n

                Output:<\/strong><\/p>\n\n\n\n

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

                Both layouts can be used combined also.<\/p>\n\n\n\n

                Conclusion:<\/strong><\/p>\n\n\n\n

                Both Flexbox and Grid are tools used in modern CSS. If we understand the differences and choose the right tool to create layout ,we can easily create a responsive and stunning web page.<\/p>\n","protected":false},"excerpt":{"rendered":"

                Introduction: In modern web page design, creating responsive web pages and visually appealing layouts is very important. The layout management options available to satisfy both these conditions are Flexbox and Grid layout. Even though both help to design pages effectively, they are used in different scenarios. This blog explains the… Continue Reading CSS Layouts: Flexbox and Grid<\/span><\/i><\/a><\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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":""},"categories":[1],"tags":[],"class_list":{"0":"post-8411","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/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:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Introduction: In modern web page design, creating responsive web pages and visually appealing layouts is very important. The layout management options available to satisfy both these conditions are Flexbox and Grid layout. Even though both help to design pages effectively, they are used in different scenarios. This blog explains the… Continue Reading CSS Layouts: Flexbox and Grid\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-18T17:11:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-18T17:11:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1867\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Keerthana P\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keerthana P\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/\"},\"author\":{\"name\":\"Keerthana P\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\"},\"headline\":\"CSS Layouts: Flexbox and Grid\",\"datePublished\":\"2024-12-18T17:11:13+00:00\",\"dateModified\":\"2024-12-18T17:11:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/\"},\"wordCount\":697,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image-1024x346.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image-1024x346.png\",\"datePublished\":\"2024-12-18T17:11:13+00:00\",\"dateModified\":\"2024-12-18T17:11:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/image.png\",\"width\":1867,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/css-layouts-flexbox-and-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Layouts: Flexbox and Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\",\"name\":\"Keerthana P\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"caption\":\"Keerthana P\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/keerthana\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","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:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Introduction: In modern web page design, creating responsive web pages and visually appealing layouts is very important. The layout management options available to satisfy both these conditions are Flexbox and Grid layout. Even though both help to design pages effectively, they are used in different scenarios. This blog explains the… Continue Reading CSS Layouts: Flexbox and Grid","og_url":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2024-12-18T17:11:13+00:00","article_modified_time":"2024-12-18T17:11:17+00:00","og_image":[{"width":1867,"height":630,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image.png","type":"image\/png"}],"author":"Keerthana P","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Keerthana P","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/"},"author":{"name":"Keerthana P","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa"},"headline":"CSS Layouts: Flexbox and Grid","datePublished":"2024-12-18T17:11:13+00:00","dateModified":"2024-12-18T17:11:17+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/"},"wordCount":697,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image-1024x346.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/","url":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image-1024x346.png","datePublished":"2024-12-18T17:11:13+00:00","dateModified":"2024-12-18T17:11:17+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#primaryimage","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2024\/12\/image.png","width":1867,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/css-layouts-flexbox-and-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Layouts: Flexbox and Grid"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa","name":"Keerthana P","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","caption":"Keerthana P"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/keerthana\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-2bF","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8411"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8411\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}