{"id":113602,"date":"2023-04-26T09:00:18","date_gmt":"2023-04-26T03:30:18","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113602"},"modified":"2024-07-27T18:50:12","modified_gmt":"2024-07-27T13:20:12","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/css-grid\/","title":{"rendered":"CSS Grid with Examples"},"content":{"rendered":"

CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. It is a two-dimensional layout system that allows for more granular control over layout and positioning of elements on a web page.<\/p>\n

In the past, developers had to use floats or positioning to achieve complex layouts, which often resulted in messy, hard-to-maintain code. CSS Grid simplifies this process by providing a set of tools that enable developers to create flexible and dynamic layouts that respond to different screen sizes and device orientations.<\/p>\n

Another major strength that can be attributed to CSS Grids is the fact that it provides the user control over both the rows and the columns; something that conventional layout techniques have only been able to do one at a time. What makes it possible is the fact that it is a dual-dimensional approach whereby the developers can make designs as complex and flexible as they wish, without the need for nesting or recomputation.<\/p>\n

Basic Terminology of CSS Grid<\/h3>\n

Before diving into the details of CSS Grid, it’s important to understand the basic terminology used in this system:<\/p>\n

1. Grid Container:<\/strong> The parent element that contains all the grid items.<\/p>\n

2. Grid Item:<\/strong> The child element that is placed inside the grid container.<\/p>\n

3. Grid Line:<\/strong> The lines that separate the rows and columns of the grid.<\/p>\n

4. Grid Cell:<\/strong> The space between two adjacent grid lines.<\/p>\n

5. Grid Track:<\/strong> The space between two adjacent grid lines in either a row or a column.<\/p>\n

6. Grid Area:<\/strong> The space between four grid lines that contains one or more grid items.<\/p>\n

Example of CSS Grid: Properties<\/h3>\n

This illustration demonstrates how to use the display: grid; property<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.grid-container {\r\ndisplay: grid;\r\ngrid-template-columns: auto auto auto;\r\nbackground-color: gray;\r\npadding: 5px;\r\n}\r\n.grid-item {\r\nbackground-color: rgba(255, 255, 255, 0.9);\r\nborder: 1px solid blue;\r\npadding: 20px;\r\nfont-size: 30px;\r\ntext-align: center;\r\n}\r\nh1 {\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<!-- Grid -->\r\n<div class=\"grid-container\">\r\n<div class=\"grid-item\">a<\/div>\r\n<div class=\"grid-item\">b<\/div>\r\n<div class=\"grid-item\">c<\/div>\r\n<div class=\"grid-item\">d<\/div>\r\n<div class=\"grid-item\">e<\/div>\r\n<div class=\"grid-item\">f<\/div>\r\n<div class=\"grid-item\">g<\/div>\r\n<div class=\"grid-item\">h<\/div>\r\n<div class=\"grid-item\">i<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"grid<\/a><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1\r\n{\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n.item1 { grid-area: header; }\r\n.item2 { grid-area: menu; }\r\n.item3 { grid-area: main; }\r\n.item4 { grid-area: right; }\r\n.item5 { grid-area: footer; }\r\n.grid-container {\r\ndisplay: grid;\r\ngrid-template-areas:\r\n'header header header header header header'\r\n'menu main main main right right'\r\n'menu footer footer footer footer footer';\r\ngap: 10px;\r\nbackground-color: #ffe996;\r\npadding: 10px;\r\n}\r\n.grid-container > div {\r\nbackground-color: rgba(255, 255, 255, 0.8);\r\ntext-align: center;\r\npadding: 20px 0;\r\nfont-size: 30px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<div class=\"grid-container\">\r\n<div class=\"item1\">One<\/div>\r\n<div class=\"item2\">Two<\/div>\r\n<div class=\"item3\">Three<\/div>\r\n<div class=\"item4\">Four<\/div>\r\n<div class=\"item5\">Five<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"grid<\/a><\/p>\n
Row grid in CSS<\/h4>\n
The parts that make up a grid are composed of rows.<\/p>\n
While the default behavior of CSS Grid is to create a two-dimensional grid, it’s also possible to create a row grid. This is useful when you want to lay out content in a single row, rather than in a grid with multiple rows and columns.
\nTo create a row grid, you need to set the display property of the grid container to grid, and then set the grid-auto-flow property to column. This tells the grid to flow items into columns, rather than rows.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1\r\n{\r\ncolor:rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n.grid-container {\r\ndisplay: grid;\r\nrow-gap: 50px;\r\ngrid-template-columns: auto auto auto;\r\nbackground-color: #ffe996;\r\npadding: 10px;\r\n}\r\n.grid-item {\r\nbackground-color: rgba(255, 255, 255, 0.8);\r\n\/* you can choose any bg color for your DataFlair Row grid *\/\r\nborder: 1px solid rgba(0, 0, 0, 0.8);\r\n\/* you can choose any bg color for your DataFlair Row grid *\/\r\npadding: 20px;\r\nfont-size: 30px;\r\ntext-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<p style=\"text-align:center\">The row-gap property is used to provide padding between the rows.<\/p>\r\n<div class=\"grid-container\">\r\n<div class=\"grid-item\">a<\/div>\r\n<div class=\"grid-item\">b<\/div>\r\n<div class=\"grid-item\">c<\/div>\r\n<div class=\"grid-item\">d<\/div>\r\n<div class=\"grid-item\">e<\/div>\r\n<div class=\"grid-item\">f<\/div>\r\n<div class=\"grid-item\">g<\/div>\r\n<div class=\"grid-item\">h<\/div>\r\n<div class=\"grid-item\">i<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"row<\/a><\/p>\n
CSS Column Grid<\/h4>\n
The vertical lines that comprise up grid elements are called columns.<\/p>\n
While CSS Grid can be used to create both row and column grids, it is often used to create column grids. Column grids are useful for laying out content in a single column, with items flowing into rows as needed.<\/p>\n
To create a column grid, you need to set the display property of the grid container to grid, and then set the grid-auto-flow property to row. This tells the grid to flow items into rows, rather than columns.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1\r\n{\r\ncolor:rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n.grid-container {\r\ndisplay: grid;\r\ncolumn-gap: 50px;\r\ngrid-template-columns: auto auto auto;\r\nbackground-color: #ffe996;\r\npadding: 10px;\r\n}\r\n.grid-item {\r\nbackground-color: rgba(255, 255, 255, 0.8);\r\n\/* you can choose any bg color for your DataFlair Columns grid *\/\r\nborder: 1px solid rgba(0, 0, 0, 0.8);\r\n\/* you can choose any bg color for your DataFlair Columns grid *\/\r\npadding: 20px;\r\nfont-size: 30px;\r\ntext-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<p style=\"text-align:center\">The column-gap property is used to provide padding between the columns.<\/p>\r\n<div class=\"grid-container\">\r\n<div class=\"grid-item\">a<\/div>\r\n<div class=\"grid-item\">b<\/div>\r\n<div class=\"grid-item\">c<\/div>\r\n<div class=\"grid-item\">d<\/div>\r\n<div class=\"grid-item\">e<\/div>\r\n<div class=\"grid-item\">f<\/div>\r\n<div class=\"grid-item\">g<\/div>\r\n<div class=\"grid-item\">h<\/div>\r\n<div class=\"grid-item\">i<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"column<\/a><\/p>\n
CSS Grid Holes<\/h4>\n
Gaps are the spaces that exist between each column or row.<\/p>\n
The row-gap and column-gap characteristics can be referred to collectively as the gap property. Grid holes can be useful for creating unique and interesting layouts. For example, you might want to create a layout where certain grid items overlap or are positioned in a non-uniform way. To do this, you can intentionally create holes in your grid container.<\/p>\n
To create Grid holes, you can use the grid-template-areas property. This property allows you to define named grid areas, which can be left empty to create holes in the grid.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1\r\n{\r\ncolor:rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n.grid-container {\r\ndisplay: grid;\r\ngap: 50px;\r\ngrid-template-columns: auto auto auto;\r\nbackground-color: #ffe996;\r\npadding: 10px;\r\n}\r\n.grid-item {\r\nbackground-color: rgba(255, 255, 255, 0.8);\r\n\/* you can choose any bg color for your DataFlair grid holes *\/\r\nborder: 1px solid rgba(0, 0, 0, 0.8);\r\n\/* you can choose any size and border color for your DataFlair grid holes*\/\r\npadding: 20px;\r\nfont-size: 30px;\r\ntext-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<p style=\"text-align:center\">The gap property is used to provide padding between the rows and columns.<\/p>\r\n<div class=\"grid-container\">\r\n<div class=\"grid-item\">a<\/div>\r\n<div class=\"grid-item\">b<\/div>\r\n<div class=\"grid-item\">c<\/div>\r\n<div class=\"grid-item\">d<\/div>\r\n<div class=\"grid-item\">e<\/div>\r\n<div class=\"grid-item\">f<\/div>\r\n<div class=\"grid-item\">g<\/div>\r\n<div class=\"grid-item\">h<\/div>\r\n<div class=\"grid-item\">i<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"grid<\/a><\/p>\n
Example:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* Designing all grid *\/\r\n.grid-container {\r\ndisplay: grid;\r\ngrid-template-columns: auto auto auto;\r\ngrid-gap: 10px;\r\nbackground-color: brown;\r\npadding: 10px;\r\n}\r\n\/* Designing all grid-items *\/\r\n.grid-container > div {\r\nbackground-color: #ffe996;\r\ntext-align: center;\r\npadding: 20px 0;\r\nfont-size: 30px;\r\n}\r\n\r\n\/* Grid Column *\/\r\n.item1 {\r\ngrid-column-start: 1;\r\ngrid-column-end: 3;\r\n}\r\n.item3 {\r\ngrid-row-start: 2;\r\ngrid-row-end: 5;\r\n}\r\nh1 {\r\ncolor: rgb(255,0,242);\r\ntext-align: center;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>DataFlair<\/h1>\r\n<div class=\"grid-container\">\r\n<div class=\"item1\">a<\/div>\r\n<div class=\"item2\">b<\/div>\r\n<div class=\"item3\">c<\/div>\r\n<div class=\"item4\">d<\/div>\r\n<div class=\"item5\">e<\/div>\r\n<div class=\"item6\">f<\/div>\r\n<div class=\"item7\">g<\/div>\r\n<div class=\"item8\">h<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Output:<\/strong><\/p>\n
\"grid<\/a><\/p>\n
Benefits of CSS Grid<\/h3>\n
There are many benefits to using CSS Grid for layout, including:<\/p>\n
1. Flexibility:<\/strong> CSS Grid enables developers to create highly flexible and adaptable layouts. These can adjust to different screen sizes and device orientations.<\/p>\n
2. Granular Control:<\/strong> CSS Grid provides a high degree of control over layout and positioning, allowing developers to create complex, multi-dimensional layouts with ease.<\/p>\n
3. Accessibility<\/strong>: CSS Grid can improve the accessibility of web content by making it easier to create responsive layouts that work well with assistive technologies like screen readers.<\/p>\n
4. Simplified Code:<\/strong> CSS Grid simplifies the code required to create complex layouts. This reduces the need for workarounds like floats and positioning.<\/p>\n
5. Improved Performance:<\/strong> By reducing the complexity of layout code, CSS Grid can help improve the performance of web pages, making them load faster and run more smoothly.<\/p>\n
CSS Grid also has good flexibility that easily supports some of the modern web design approaches, for instance, the mobile-first design. Thus, the adaptive image grid can be built with the help of grid-template-areas, which along with media queries allow developers to create responsive and device-oriented layouts. It leads to harmony while creating a more effective interface which is convenient for every user across the platforms.<\/p>\n
Conclusion<\/h3>\n
There have been numerous ways to tackle this layout over the years. But CSS grid makes it not only relatively simple but also gives you a wide range of possibilities. Grid is perfect for this type of layout because it excels at fusing the control that external sizing offers with the adaptability of intrinsic sizing.<\/p>\n
Grid is a layout technique made specifically for two-dimensional content, which explains why. That is, arranging items in both columns and rows at once.<\/p>\n
We construct a grid with columns and rows while making a grid layout. Then you either arrange items on that grid manually or leave it up to the browser to automatically place them in the cells you’ve defined. Grid has a lot to offer, but with a quick review, you’ll be creating grid layouts with no time.<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. It is a two-dimensional layout system that allows for more granular control over layout and positioning...<\/p>\n","protected":false},"author":581,"featured_media":114324,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27520],"class_list":["post-113602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-css-grid"],"yoast_head":"\nCSS Grid with Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. Learn more about it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid with Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. Learn more about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-26T03:30:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T13:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Grid with Examples - DataFlair","description":"CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. Learn more about it.","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:\/\/data-flair.training\/blogs\/css-grid\/","og_locale":"en_US","og_type":"article","og_title":"CSS Grid with Examples - DataFlair","og_description":"CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. Learn more about it.","og_url":"https:\/\/data-flair.training\/blogs\/css-grid\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-26T03:30:18+00:00","article_modified_time":"2024-07-27T13:20:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"CSS Grid with Examples","datePublished":"2023-04-26T03:30:18+00:00","dateModified":"2024-07-27T13:20:12+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/"},"wordCount":925,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp","keywords":["CSS Grid"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/css-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/css-grid\/","url":"https:\/\/data-flair.training\/blogs\/css-grid\/","name":"CSS Grid with Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp","datePublished":"2023-04-26T03:30:18+00:00","dateModified":"2024-07-27T13:20:12+00:00","description":"CSS Grid is a powerful layout system that allows web developers to create complex, multi-dimensional layouts with ease. Learn more about it.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/css-grid.webp","width":1200,"height":628,"caption":"css grid"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"CSS Grid with Examples"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113602"}],"version-history":[{"count":8,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113602\/revisions"}],"predecessor-version":[{"id":142993,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113602\/revisions\/142993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/114324"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}