{"id":17169,"date":"2017-10-04T11:30:30","date_gmt":"2017-10-04T11:30:30","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=17169"},"modified":"2017-10-04T11:30:30","modified_gmt":"2017-10-04T11:30:30","slug":"fearless-guide-using-css-grid-today","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/","title":{"rendered":"A fearless guide to using CSS Grid today"},"content":{"rendered":"

My fellow CSS developers,<\/p>\n

I know you\u2019ve been burned before with tales of exciting new CSS specifications that won\u2019t be ready to use in production for years. I\u2019m here to tell you, those days are in our past and the brightest example of our future is with CSS Grid! You can absolutely use it now, and in this article, I\u2019ll show you how without much fuss or the need for any external dependencies.<\/p>\n

The backstory: How CSS Grid went from 0 to approximately 70% browser support in under a month<\/h3>\n

Before we dive into the “how”, let\u2019s better understand a little of the “why” Grid is different than the CSS features that have come before.<\/p>\n

In early 2017, three major browsers, Firefox, Chrome, and Safari, shipped unprefixed and consistent Grid implementations within weeks of each other. This approach is drastically different from how Flexbox was rolled out, and this was intentional to avoid all the drama we developers have had to deal with (and still have to deal with) around vendor prefixing. Grid was worked on behind browser flags instead of being rolled out with vendor prefixes so it could still be tested, but could not be used on production sites while it was being developed and iterated on. So unlike Flexbox, Grid has been delivered prefix-free and ready to use from the onset… with one small exception.<\/p>\n

The origin of the Grid specification came from Microsoft and this early version has been live in Microsoft browsers with an -ms prefix since Internet Explorer 10 in 2012. The specification has grown considerably since these early days, with new properties and values that were not part of the original specification. The key thing to remember from this is that vendor prefixed Grid properties mean old Microsoft specification, and there are no prefixed versions that exist in any other browsers. Later on, I\u2019ll talk about what that means and how to easily get around it so the old prefixed version does not cause unintentional layout problems.<\/p>\n

A step by step guide to writing CSS Grid<\/h3>\n

I have been confidently writing Grid for use in production since November of 2016, before it had shipped in any browser. Here\u2019s how I go about it:<\/p>\n

Identify a good use case for Grid<\/h4>\n

Is it worth the hype? What exactly is Grid and what is it good for?<\/p>\n

Grid is awesome<\/em>! It can create layouts that we couldn\u2019t achieve with pure CSS before, and it can make layouts we already have much easier to write and maintain without frameworks. This of course, is not going to be the right solution for every problem and it is not a replacement for Flexbox, although it shares a lot of the same traits.<\/p>\n

Flexbox is great for laying out elements in one direction.<\/p>\n

Either in rows…<\/p>\n

\"The<\/p>\n

…or columns.<\/p>\n

\"The<\/p>\n

Grid allows you to layout elements in two directions, columns and rows!<\/p>\n

\"The<\/p>\n

The major benefit here is that we don\u2019t need elements to depend on each other for placement. We can specify their position on the x and y axis independent of what is around them.<\/p>\n

Think of the possibilities! There are already so many terrific resources out there for how to use Grid. Two sites I recommend for in-depth tutorials and examples of Grid are by Jen Simmons at labs.jensimmons.com<\/a> and Rachel Andrew at gridbyexample.com<\/a>. Rachel has also created a great guide to getting started: gridbyexample.com\/learn<\/a>.<\/p>\n

Now that we have a bit more history and background, let\u2019s look back at the original question: when should I use Grid? I consider it whenever I would normally reach for a different common layout property: either Flexbox, floats, or positioning, and then play around with Grid to see if I can make it work. What I have found is that most of the time, Grid makes things much more simple and I end up learning a lot about how the new specification works in the process.<\/p>\n

Write Grid code<\/h4>\n

Make sure you are working with a browser that supports Grid, which as of this publication is the latest versions of Chrome, Safari, and Firefox, with Edge support coming on 17 October 2017. If you aren\u2019t sure, check Can I Use?<\/a> for a list of supported browsers.<\/p>\n

For the rest of this article, we\u2019ll use an example implementation of Grid from a side project of mine, Grub Gallery<\/a>, a single page app that displays Foursquare search results as images. <\/p>\n

\"Screenshot<\/p>\n

This is a pretty straight forward use of Grid: display images of equal width and height in rows and columns.<\/p>\n<\/p>\n

Here\u2019s the markup we will style (I\u2019ve simplified the markup so we can focus only on what we are working with):<\/p>\n

<ul class=\"search-results\">
\n<li class=\"search-results__result\">
\n<img class=\"search-results__photo\" src=\"path-to-image.jpg\">
\n<\/li>
\n<li class=\"search-results__result\">
\n<img class=\"search-results__photo\" src=\"path-to-image.jpg\">
\n<\/li>
\n...more <li>s<\/em>
\n<\/ul><\/code><\/p>\n

Here\u2019s the CSS using Grid:<\/p>\n

.search-results {
\ndisplay: grid;
\ngrid-gap: 10px;
\ngrid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
\npadding: 10px;
\n}<\/code><\/p>\n

Yes, that\u2019s all we need! Four properties on the parent element to make this layout fully responsive, flexible, and fluid. This code is saying, “I want the children of .search-results<\/code> to be in a grid with 10px gutters between each element, and 10px around the edge of their container. Each element should be no smaller than 320px, but go ahead and size them larger to fill the width of their container evenly until you can fit another element in the row at 320px.” <\/p>\n

Here\u2019s an article with a more detailed explanation on auto-fit and minmax<\/a>. Rachel Andrew also has a great in-depth video tutorial on the fr unit<\/a>.<\/p>\n

Fallback gracefully with CSS @supports<\/code><\/h3>\n

We can use @supports<\/a> in our CSS to perform a feature query, and wrap our grid code in a rule like this:<\/p>\n

@supports (display: grid)
\n.search-results {
\ndisplay: grid;
\ngrid-gap: 10px;
\ngrid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
\n}
\n}<\/code><\/p>\n

These styles will now only be read by browsers that support the display: grid;<\/code> property. Every browser that supports Grid also supports @supports<\/code>, so if a browser doesn\u2019t know how to read @supports<\/code>, it will ignore what\u2019s inside of it. For this reason, we should make our fallback styles our default CSS styles to cover all cases.<\/p>\n

Since you are working in a browser that supports Grid, comment out the Grid styles while you write your fallback styles to be able to test them in your browser, and don\u2019t forget to uncomment them out when you are finished. <\/p>\n<\/p>\n

Here is my final code with Flexbox as a fallback and my Grid styles wrapped in an @supports<\/code> rule. Make sure to put your Grid styles after your default fallback styles. This way you can override any styles from the fallback that aren\u2019t needed for Grid. In the following example, I originally didn\u2019t need any styling on the child .search-results__result<\/code> elements with my Grid-only solution, but after writing the fallback, I needed to override the default styles for margin and width. Look at all those media queries I had to add with my fallback that I didn\u2019t need with Grid!<\/p>\n

.search-results {
\ndisplay: flex;
\nflex-wrap: wrap;
\npadding: 5px;
\n}<\/code><\/p>\n

@supports (display: grid) {
\n.search-results {
\ndisplay: grid;
\ngrid-gap: 10px;
\ngrid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
\npadding: 10px
\n}
\n}<\/code><\/p>\n

.search-results__result {
\nmargin: 5px;
\n}<\/code><\/p>\n

@media only screen and (min-width: 500px) {
\n.search-results__result {
\nwidth: calc(50% - 10px);
\n}
\n}<\/code><\/p>\n

@media only screen and (min-width: 800px) {
\n.search-results__result {
\nwidth: calc(33.3333% - 10px);
\n}
\n}<\/code><\/p>\n

@media only screen and (min-width: 1200px) {
\n.search-results__result {
\nwidth: calc(25% - 10px);
\n}
\n}<\/code><\/p>\n

@supports (display: grid) {
\n.search-results__result {
\nmargin: 0;
\nwidth: auto;
\n}
\n}<\/code><\/p>\n

Considerations with Autoprefixer<\/h3>\n

With the above approach, you have all bases covered with a fallback for browsers that don\u2019t support Grid. The @supports (display: grid)<\/code> rule will not apply to browsers that support only the prefixed version of grid (Internet Explorer). However, if you use Autoprefixer<\/a> as a post-processor and you are using the method above, you most likely don\u2019t want it to translate Grid for you. It\u2019s easier to have Internet Explorer rely on your fallback, so you need to make sure that Autoprefixer has Grid disabled.<\/p>\n

If you are using Autoprefixer version 7.0 or above, Grid is disabled by default and you don\u2019t have to do anything! If you are using an earlier version of Autoprefixer, either upgrade to version 7.0 or above, or you can set grid: false<\/code> in your Autoprefixer configuration. Where that configuration occurs varies depending on how you are serving it (Webpack, Gulp, Rails, etc). <\/p>\n

Ship It!<\/h4>\n

Yes, that\u2019s all! No JavaScript, no polyfills, no frameworks, no fuss, not much extra time to implement. I find it generally takes me longer to write the fallback than to write the Grid code (I told you it was awesome!).<\/p>\n

Super graceful degradation<\/h3>\n

In our example, we are accomplishing practically the same layout with Grid or with Flexbox, but that doesn\u2019t have to be the case. CSS doesn\u2019t have to be all or nothing anymore. Let\u2019s push the boundaries forward! We have been conditioned to strive for pixel perfection, but we\u2019ve had the world of responsive design and unlimited device widths to consider for a few years now. I encourage you to optimise for the best experience in modern browsers (right now, over 70% usage globally for Grid and climbing!) and to provide a great, usable experience for the rest.<\/p>\n","protected":false},"excerpt":{"rendered":"

Brenda Storer gets into the details about CSS Grid, and how, unlike many other CSS specifications, you can start using it today to build elegant and beautiful grid layouts that just work.<\/p>\n","protected":false},"author":2,"featured_media":17175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-17169","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"\nA fearless guide to using CSS Grid today - Heart Internet<\/title>\n<meta name=\"description\" content=\"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A fearless guide to using CSS Grid today - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-04T11:30:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1265\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"A fearless guide to using CSS Grid today\",\"datePublished\":\"2017-10-04T11:30:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\"},\"wordCount\":1428,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\",\"name\":\"A fearless guide to using CSS Grid today - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg\",\"datePublished\":\"2017-10-04T11:30:30+00:00\",\"description\":\"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg\",\"width\":1265,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A fearless guide to using CSS Grid today\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A fearless guide to using CSS Grid today - Heart Internet","description":"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.","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:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/","og_locale":"en_GB","og_type":"article","og_title":"A fearless guide to using CSS Grid today - Heart Internet","og_description":"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.","og_url":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2017-10-04T11:30:30+00:00","og_image":[{"width":1265,"height":500,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"A fearless guide to using CSS Grid today","datePublished":"2017-10-04T11:30:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/"},"wordCount":1428,"commentCount":6,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/","url":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/","name":"A fearless guide to using CSS Grid today - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg","datePublished":"2017-10-04T11:30:30+00:00","description":"Brenda Storer gets into the details about CSS Grid, and how you can start using it today to build elegant and beautiful grid layouts that just work.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2017\/10\/cssgrids-background.jpg","width":1265,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/fearless-guide-using-css-grid-today\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"A fearless guide to using CSS Grid today"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/17169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=17169"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/17169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/17175"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=17169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=17169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=17169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}