{"id":1716,"date":"2017-02-24T18:31:38","date_gmt":"2017-02-24T18:31:38","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1716"},"modified":"2017-04-28T16:21:27","modified_gmt":"2017-04-28T16:21:27","slug":"build-awesome-desktop-apps-with-ionics-new-responsive-grid","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid","title":{"rendered":"Build Awesome Desktop Apps with Ionic&#8217;s NEW Responsive Grid"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"689\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\" alt=\"grid\" class=\"aligncenter size-full wp-image-1723 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/689;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"689\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\" alt=\"grid\" class=\"aligncenter size-full wp-image-1723\" \/><\/noscript><\/p>\n<p>We\u2019ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic\u2019s desktop support is an <strong>all-new<\/strong> responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.<\/p>\n<p><!--more--><\/p>\n<p>The <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Grid\">new grid<\/a> is a powerful, mobile-first flexbox grid system composed of three units &#8211; a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns and breakpoints can be <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Grid\/#customizing-the-grid\">fully customized using Sass<\/a>.<\/p>\n<p>Let\u2019s dive into the new grid system!<\/p>\n<h3>What\u2019s new?<\/h3>\n<ul>\n<li>Attributes for grid, row, and column are now supported in addition to using them as an element. Use the <code>&lt;ion-grid&gt;<\/code>, <code>&lt;ion-row&gt;<\/code> and <code>&lt;ion-col&gt;<\/code> elements or add them to any element (e.g., <code>&lt;div ion-row&gt;<\/code> or <code>&lt;p ion-col&gt;<\/code>).<\/li>\n<li>New and changed <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Row\/#row-attributes\">attributes for rows<\/a>:\n<ul>\n<li>Rows will wrap by default, but adding the <code>nowrap<\/code> attribute will prevent wrapping.<\/li>\n<li>Reverse wrap the row by adding the <code>wrap-reverse<\/code> attribute.<\/li>\n<li>Attributes to vertically align all columns for a row have been changed to <code>align-items-*<\/code>.<\/li>\n<li>Attributes to horizontally align all columns for a row have been added as <code>justify-content-*<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Col\/#column-attributes\">Attributes for columns<\/a> to align a column vertically have been changed to <code>align-self-*<\/code>.<\/li>\n<li>Media query support for any number of breakpoints which can be <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Grid\/#customizing-the-grid\">customized via Sass<\/a>. Defaults to: all breakpoints (<code>xs<\/code>), <code>sm<\/code>, <code>md<\/code>, <code>lg<\/code>, and <code>xl<\/code>.<\/li>\n<li>Each column can be set to take up a specific number of columns out of the total number of columns, no longer by a predefined percentage.<\/li>\n<li>New variable width columns that take up the width of their content by adding the <code>col-{breakpoint}-auto<\/code> attributes, where <code>{breakpoint}<\/code> can be omitted in order to affect all breakpoints or specified to use one of the predefined breakpoints.<\/li>\n<li>Added pull and push modifiers to change the order of the columns.<\/li>\n<li>Responsive row attributes have been deprecated, but the same can be achieved using the new attributes.<\/li>\n<li>Set the grid to a fixed size based on screen size by adding the <code>fixed<\/code> attribute.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"366\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid-2-1.gif\" alt=\"grid-2\" class=\"aligncenter size-full wp-image-1726 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 927px; --smush-placeholder-aspect-ratio: 927\/366;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"927\" height=\"366\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid-2-1.gif\" alt=\"grid-2\" class=\"aligncenter size-full wp-image-1726\" \/><\/noscript><\/p>\n<h3>Getting started<\/h3>\n<p>To use the new grid, simply update to the latest version of Ionic by running the following command:<\/p>\n<pre><code class=\"bash\">npm install --save --save-exact ionic-angular@2.1.0\n<\/code><\/pre>\n<p>If you\u2019ve never used the grid before, head on over to the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Grid\/\">Grid API documentation<\/a> for usage information. If you have already been using the grid, read the next section for steps to convert to the new grid.<\/p>\n<h3>Converting to the new grid<\/h3>\n<p>While the old grid attributes are still supported for now, we will be removing them in a future release. We strongly recommend updating now to avoid any surprises down the road. Here are some steps that should get you updated to the latest and greatest:<\/p>\n<ol>\n<li>Columns will automatically size to take up equal width inside of a row unless specified. If you are setting the width explicitly using <code>width-*<\/code> attributes, you should now set the the size by specifying how many columns out of the total columns it should take up. The number of total columns defaults to 12 for the new grid system. To change this, change the value of the following Sass variable from <code>12<\/code> to your number of desired columns:\n<pre><code class=\"scss\">$grid-columns:         12;\n<\/code><\/pre>\n<p><em>All examples in this post will be based on a 12 column grid.<\/em><\/p>\n<\/li>\n<li>\n<p>All instances of <code>width-*<\/code> attributes will need to be changed to use <code>col-*<\/code>. So for example, if you have the following:<\/p>\n<pre><code class=\"html\">&lt;ion-col width-50&gt;col&lt;\/ion-col&gt;\n<\/code><\/pre>\n<p>it should be changed to take up 50% of the available columns, so 6 columns:<\/p>\n<pre><code class=\"html\">&lt;ion-col col-6&gt;col&lt;\/ion-col&gt;\n<\/code><\/pre>\n<\/li>\n<li>The <code>offset-*<\/code> attributes still start with <code>offset-*<\/code>, but the number value that follows should still change from a percentage to the number of available columns. Here\u2019s an example using <code>offset-25<\/code>:\n<pre><code class=\"html\">&lt;ion-col offset-25&gt;col&lt;\/ion-col&gt;\n<\/code><\/pre>\n<p>it should be changed to offset by 25% of the available columns, so 3 columns:<\/p>\n<pre><code class=\"html\">&lt;ion-col offset-3&gt;col&lt;\/ion-col&gt;\n<\/code><\/pre>\n<\/li>\n<li>Responsive row attributes have been removed. In order to achieve the old way of using the <code>responsive-*<\/code> attributes:\n<pre><code class=\"html\">&lt;ion-row responsive-sm&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<p>it should become:<\/p>\n<pre><code class=\"html\">&lt;ion-row&gt;\n  &lt;ion-col col-12 col-sm&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col col-12 col-sm&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col col-12 col-sm&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<p>This tells it to take up 12 columns up to the small breakpoint and then change to equal width columns.<\/p>\n<\/li>\n<li>\n<p>If you were using any of the vertical alignment attributes on rows such as <code>top<\/code>, <code>center<\/code>, <code>bottom<\/code>, etc. they will need to be changed to the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Row\/#row-attributes\">new attributes for alignment<\/a>. For example:<\/p>\n<pre><code class=\"html\">&lt;ion-row top&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<p>it should become:<\/p>\n<pre><code class=\"html\">&lt;ion-row align-items-start&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<\/li>\n<li>Similar to the row, the horizontal attributes for columns will need to be changed to the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/grid\/Col\/#column-attributes\">new attributes for alignment<\/a>. For example:\n<pre><code class=\"html\">&lt;ion-row&gt;\n  &lt;ion-col top&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col center&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col bottom&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<p>it should become:<\/p>\n<pre><code class=\"html\">&lt;ion-row&gt;\n  &lt;ion-col align-self-start&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col align-self-center&gt;col&lt;\/ion-col&gt;\n  &lt;ion-col align-self-end&gt;col&lt;\/ion-col&gt;\n&lt;\/ion-row&gt;\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>What\u2019s next?<\/h3>\n<p>While a new grid system is great, our support for desktop doesn\u2019t end here! We will be continuously making improvements to features that extend the power and extensibility of the framework. In addition to more responsive features, we plan on improving our support for accessibility, electron, windows, and more. Our next major feature will be <a href=\"https:\/\/ionic.io\/blog\/testing-split-pane-support\/\">split pane support<\/a>, an often requested component that is shaping up to be amazing! Also, up next we\u2019ll be making our <code>showWhen<\/code> and <code>hideWhen<\/code> components more powerful than ever. We can\u2019t wait for you to get your hands on these features and add them to your apps.<\/p>\n<h3>Thank you<\/h3>\n<p>We want to sincerely thank you for your feedback and patience as we work towards better desktop support. We want you to know that we hear you, and know how important these features are to you. &lt;3<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic\u2019s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1716","post","type-post","status-publish","format-standard","hentry","category-all"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Awesome Desktop Apps with Ionic&#039;s NEW Responsive Grid - Ionic Blog<\/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:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Awesome Desktop Apps with Ionic&#039;s NEW Responsive Grid\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic\u2019s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-24T18:31:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-28T16:21:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\" \/>\n<meta name=\"author\" content=\"Brandy Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brandy Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\"},\"author\":{\"name\":\"Brandy Smith\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\"},\"headline\":\"Build Awesome Desktop Apps with Ionic&#8217;s NEW Responsive Grid\",\"datePublished\":\"2017-02-24T18:31:38+00:00\",\"dateModified\":\"2017-04-28T16:21:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\"},\"wordCount\":862,\"commentCount\":38,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\",\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\",\"url\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\",\"name\":\"Build Awesome Desktop Apps with Ionic's NEW Responsive Grid - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\",\"datePublished\":\"2017-02-24T18:31:38+00:00\",\"dateModified\":\"2017-04-28T16:21:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif\",\"width\":1000,\"height\":689},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Awesome Desktop Apps with Ionic&#8217;s NEW Responsive Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\",\"name\":\"Brandy Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"caption\":\"Brandy Smith\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/brandy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Awesome Desktop Apps with Ionic's NEW Responsive Grid - Ionic Blog","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:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid","og_locale":"en_US","og_type":"article","og_title":"Build Awesome Desktop Apps with Ionic's NEW Responsive Grid","og_description":"We\u2019ve been hard at work at Ionic improving our support for desktop applications, one of our most requested features. The central piece of Ionic\u2019s desktop support is an all-new responsive grid system that makes it easy to build UI that scales up from mobile through tablet and desktop displays.","og_url":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid","og_site_name":"Ionic Blog","article_published_time":"2017-02-24T18:31:38+00:00","article_modified_time":"2017-04-28T16:21:27+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif"}],"author":"Brandy Smith","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Brandy Smith","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid"},"author":{"name":"Brandy Smith","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26"},"headline":"Build Awesome Desktop Apps with Ionic&#8217;s NEW Responsive Grid","datePublished":"2017-02-24T18:31:38+00:00","dateModified":"2017-04-28T16:21:27+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid"},"wordCount":862,"commentCount":38,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif","articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid","url":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid","name":"Build Awesome Desktop Apps with Ionic's NEW Responsive Grid - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif","datePublished":"2017-02-24T18:31:38+00:00","dateModified":"2017-04-28T16:21:27+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/grid.gif","width":1000,"height":689},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/build-awesome-desktop-apps-with-ionics-new-responsive-grid#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Build Awesome Desktop Apps with Ionic&#8217;s NEW Responsive Grid"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26","name":"Brandy Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","caption":"Brandy Smith"},"url":"https:\/\/ionic.io\/blog\/author\/brandy"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1716"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1716\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}