{"id":273207,"date":"2018-07-06T07:03:23","date_gmt":"2018-07-06T14:03:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=273207"},"modified":"2020-12-19T03:34:31","modified_gmt":"2020-12-19T11:34:31","slug":"css-grid-in-ie-faking-an-auto-placement-grid-with-gaps","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps\/","title":{"rendered":"CSS Grid in IE: Faking an Auto-Placement Grid with Gaps"},"content":{"rendered":"

This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane.<\/p>\n

In Part 1<\/a>, I covered some of the common misconceptions that people have about IE11\u2019s native CSS grid implementation. In Part 2<\/a>, I showed the world how easy it actually is to write IE-friendly CSS grid code.<\/p>\n

Today, I\u2019m going step away from CSS grid for a moment to show you a flexbox technique that replicates basic CSS grid auto-placement functionality. This CSS grid replica will even look like a grid-gap<\/code> has been applied to it. I need to be super clear though: this is not<\/em> about how to make actual CSS grid auto-placement work in IE.<\/p>\n

<\/p>\n

\n

Article Series:<\/h4>\n
    \n
  1. \n Debunking common IE Grid misconceptions<\/a><\/li>\n
  2. \n CSS Grid and the new Autoprefixer <\/a><\/li>\n
  3. \n Faking an auto-placement grid with gaps (This Post)<\/em><\/li>\n
  4. \n Duplicate area names now supported!<\/a><\/li>\n<\/ol>\n<\/div>\n

    How to make a fake grid with cell gaps<\/h3>\n

    Step 1: HTML<\/h4>\n

    I\u2019ll use this basic HTML as an example:<\/p>\n

    \n\n\n<div class=\"grid-wrapper\">\n\n\n\n\n<div class=\"grid\">\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n\n\n\n<div class=\"grid-cell\"><\/div>\n\n\n\n<\/div>\n\n\n\n  \n<\/div>\n\n<\/code><\/pre>\n
    Step 2: Border-box box sizing<\/h4>\n
    The first thing that we need to do in the CSS is make sure that all of the boxes are being sized based on border-box<\/code> rather than content-box<\/code>. The best way to do that is using the box-sizing: border-box<\/code> inheritance technique<\/a>:<\/p>\n
    html {\n  box-sizing: border-box;\n}\n\n*, *::before, *::after {\n  box-sizing: inherit;\n}<\/code><\/pre>\n
    That will be applied globally. If you are working on an an existing project that doesn\u2019t have box-sizing<\/code> set to border-box<\/code>, then change html<\/code> in the snippet to a selector that targets the element you want to turn into a grid.<\/p>\n
    Step 3: Flex<\/h4>\n
    Next, you will need to turn on some flexbox settings:<\/p>\n
    .grid {\n  \/* Forces equal cell heights *\/\n  display: flex;\n  flex-wrap: wrap;\n}<\/code><\/pre>\n
    Step 4: Widths<\/h4>\n
    Now, set up your column widths. We\u2019ll make ourselves a simple three-column grid:<\/p>\n
    .grid-cell {\n  \/* Sets column count *\/\n  width: calc(100% \/ 3); \/* calc() method *\/\n  width: 33.33%; \/* percentage method *\/\n}<\/code><\/pre>\n
    The calc()<\/code> method allows the column widths to be changed a bit more easily. You state how many columns you want and the browser does the math for you. This is especially handy for when you need a larger number of columns, like 7 or 8. The browser support for calc()<\/code> is strong but not as strong as a raw percentage value which has been supported by browsers since the dawn of CSS.<\/p>\n
    This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
    Desktop<\/h4>
    Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
    19*<\/span><\/td>4*<\/span><\/td>11<\/span><\/td>12<\/span><\/td>6*<\/span><\/td><\/tr><\/table><\/div>
    Mobile \/ Tablet<\/h4>
    Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
    124<\/span><\/td>125<\/span><\/td>124<\/span><\/td>6.0-6.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n
    The percentage method has slightly better browser support and can be a bit more stable in IE. If you don’t need to support Opera Mini, I would still recommend going with the calc()<\/code> method first. Test in IE, and if the layout breaks, first try using 99.999%<\/code> instead of 100%<\/code> in the calc function (calc(99.999% \/ 3)<\/code>). If that doesn’t work, then try switching to the percentage method. I will be using the calc()<\/code> method in all of my examples. Note that if you are using a CSS pre-processor like SCSS, you can have the best of both worlds by getting the pre-processor to do the math for you. This comes at the cost of not being as easily able to edit or review the column counts in browser dev tools.<\/p>\n
    \/* Set column count using SCSS *\/\n.grid-cell {\n  width: (100% \/ 3);\n}\n\n\/* CSS output into the browser *\/\n.grid-cell {\n  width: 33.3333333333%;\n}<\/code><\/pre>\n
    Let\u2019s give the grid cells some height and an inner box-shadow<\/code> so that we can see what\u2019s going on. I\u2019m not adding border \u2014 I\u2019ll be using that later. 😉<\/p>\n
    .grid-cell {\n  \/* So that we can see the grid cells *\/\n  box-shadow: inset 0 0 0 1px #000;\n  height: 100px;\n}\n\n.grid-wrapper {\n  \/* Allows us to see the edges of the grid *\/\n  box-shadow: 0 0 10px 2px green;\n}<\/code><\/pre>\n
    You should now have something that looks like this:<\/p>\n
    \"\"
    A basic 3 x 2 grid with no gaps<\/figcaption><\/figure>\n
    That\u2019s boring though, right? Everyone knows how to do that. Where are these grid gaps I keep talking about? I want my gaps!!!<\/em><\/strong><\/p>\n
    Step 5: Border<\/h4>\n
    Here\u2019s where we get to the interesting part. Since we set box-sizing<\/code> to border-box<\/code>, the 33.33% width now includes<\/em> the border. What this means is that we can start safely mixing fixed and percentage based units! 😃<\/p>\n
    .grid {\n  \/* Creates an equal outer gap *\/\n  padding: 20px 0 0 20px;\n}\n\n.grid-cell {\n  \/* Creates gaps *\/\n  border: 0 solid transparent;\n  border-width: 0 20px 20px 0;\n}<\/code><\/pre>\n
    This results in something that looks like a grid with equal spacing everywhere:<\/p>\n
    \"\"
    A 3 x 2 grid with equal space between each cell and the outer edges of the grid<\/figcaption><\/figure>\n
    To help give you a better idea of what is going on, take a look at the following image:<\/p>\n
    \"\"
    Color-coded diagram of the grid<\/figcaption><\/figure>\n
    The blue area on the top and left sides of the grid is the padding for the .grid<\/code> element. The yellow outlines show the area that each .grid-cell<\/code> element takes up. The red areas on the bottom and right sides of each cell are the border for each .grid-cell<\/code> element.<\/p>\n
    That might be the look that you actually want. On the other hand, that isn\u2019t what a grid with a grid-gap<\/code> setting looks like. That is why we have another step.<\/p>\n
    Step 6: Margin and overflow<\/h4>\n
    In order to get the grid pressing hard up against the edges of its container, we need a bit of help from negative margins and overflow: hidden<\/code>:<\/p>\n
    .grid {\n  \/* Pulls grid cells hard against edges *\/\n  margin: -20px;\n}\n\n.grid-wrapper {\n  \/* Prevents odd margin behavior *\/\n  overflow: hidden;\n}<\/code><\/pre>\n
    We need to apply overflow: hidden<\/code> to prevent this from happening:<\/p>\n
    \"\"
    Top and bottom negative margin is ignored if overflow is not hidden<\/figcaption><\/figure>\n
    Applying the negative margin and overflow: hidden<\/code> will get us to this beautiful recreation of basic grid-gap<\/code> functionality:<\/p>\n
    \"\"
    A 3 x 2 grid that looks identical to a CSS grid with a gap setting<\/figcaption><\/figure>\n
    The top and left padding on the grid is actually optional. You can opt to leave off the padding and change the margin value as shown below if you prefer:<\/p>\n
    .grid {\n  \/* Margin needs to be this if leaving off the top and left .grid padding *\/\n  margin: 0 -20px -20px 0;\n}<\/code><\/pre>\n
    But, hold on! The job isn\u2019t quite over yet. Take a look at what happens if we add a background color to one of the grid cells:<\/p>\n
    \"\"
    A pink background applied to the top left cell overflows into the grid gap<\/figcaption><\/figure>\n
    Not exactly what we want, so there is one more step.<\/p>\n
    Step 7: background-clip<\/h4>\n
    In order to prevent the grid cell background from bleeding into our fake grid-gap<\/code>, we need to add background-clip: padding-box<\/code> to it.<\/p>\n
    .grid-cell {\n  \/* Prevents background bleed *\/\n  background-clip: padding-box;\n}<\/code><\/pre>\n
    Now we have this:<\/p>\n
    \"\"
    The background bleed has been fixed!<\/figcaption><\/figure>\n
    If you have never heard of the background-clip<\/code> property before, you might be worried about browser support\u2026 well don\u2019t be. background-clip<\/code> has been around since IE9!<\/p>\n
    This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
    Desktop<\/h4>
    Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
    15<\/span><\/td>4<\/span><\/td>9<\/span><\/td>12<\/span><\/td>7<\/span><\/td><\/tr><\/table><\/div>
    Mobile \/ Tablet<\/h4>
    Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
    124<\/span><\/td>125<\/span><\/td>4.4<\/span><\/td>7.0-7.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n
    Step 8: Media Queries!<\/h4>\n
    Most of the time, grids need to be able to change the number of columns that they have as they grow and shrink. Using other methods can be a massive pain. You might have to calculate a bunch of nth-childs so you can remove the right margin or whatever. With this method, you only have to change a single value! 😃<\/p>\n
    .grid-cell {\n  \/* Sets the default column count *\/\n  width: calc(100% \/ 1); \/* 1 column *\/\n}\n\n@media (min-width: 400px){\n  .grid-cell {\n    width: calc(100% \/ 2); \/* 2 columns *\/\n  }\n}\n\n@media (min-width: 600px){\n  .grid-cell {\n    width: calc(100% \/ 3); \/* 3 columns *\/\n  }\n}<\/code><\/pre>\n
    \"\"
    3 x 2 grid with gaps<\/figcaption><\/figure>\n
    \"\"
    2 x 3 grid with gaps<\/figcaption><\/figure>\n
    \"\"
    1 x 6 grid with gaps<\/figcaption><\/figure>\n
    Here\u2019s how it looks when we put it all together:<\/p>\n
    See the Pen Fake grid<\/a> by Daniel Tonon (@daniel-tonon<\/a>) on CodePen<\/a>.<\/p>\n
    Ain\u2019t nobody got time for dat!<\/h3>\n
    That\u2019s a lot of work compared to what modern Grid can do in just three lines of CSS! To make the task easier, I created an SCSS-powered mixin I call Gutter Grid<\/a>. Once Gutter Grid is installed in the project, you can quickly create a three-column grid with 20px gaps using the following SCSS code:<\/p>\n
    .grid-wrapper {\n  overflow: hidden; \/* Need this for the chrome bug *\/\n}\n\n.grid {\n  @include grid($cols: 3, $gutter: 20px);\n}<\/code><\/pre>\n
    You can write it even shorter like this if that feels too verbose:<\/p>\n
    .grid-wrapper {\n  overflow: hidden;\n}\n\n.grid {\n  @include grid(3, 20px);\n}<\/code><\/pre>\n
    Gutter Grid comes pre-built with a few sets of breakpoints so you may not have to write any breakpoints at all if your grid spans the whole page! If you do need custom breakpoints, though, then Gutter Grid lets you easily customize them like so:<\/p>\n
    \/\/ Verbose custom breakpoints\n@include grid($cols: 7, $gutter: 20px, $breakpoints: (\n  4 : 960px, \/\/ At 960px or below, there will be 4 columns\n  2 : (max, 600px), \/\/ You can use mq-scss syntax here as well\n  1 : 480px,\n));\n\n\/\/ Short version  \n@include grid(7, 20px, (\n  4 : 960px,\n  2 : 600px,\n  1 : 480px,\n));<\/code><\/pre>\n
    As you might have noticed in the example, Gutter Grid also supports the same media query syntax that this thing called mq-scss<\/a> uses. If you are wondering what that is, well, it\u2019s a Sass mixin that I created that makes writing and managing media queries about a million times easier. Using mq-scss statements to dictate column count allows for very fine control over when the column count changes.<\/p>\n
    Adding shadows to the grid cells<\/h3>\n
    Since we are working with shadows now, I\u2019ll take the box shadow off of the example image. Our starting grid looks like this now:<\/p>\n
    \"\"
    A basic 3 x 2 grid with gaps and a green border around the outside<\/figcaption><\/figure>\n
    If we try to add an outer box-shadow<\/code> to each grid cell right now\u2026 well it doesn\u2019t look so good:<\/p>\n
    \"\"
    Adding shadows to the grid cells causes the shadows to be out of alignment<\/figcaption><\/figure>\n
    Let\u2019s fix that.<\/p>\n
    Step 1: New HTML<\/h4>\n
    In order to create nice shadows, we need to add an extra div inside each grid cell. You can\u2019t really use ::before<\/code> or ::after<\/code> for this since they are unable to contain HTML content inside of them.<\/p>\n
    \n\n<div class=\"grid-wrapper\">\n\n\n\n<div class=\"grid\">\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n<div class=\"grid-cell\">\n\n\n\n<div class=\"grid-cell-inner\"><\/div>\n\n\n\n<\/div>\n\n\n\n\n<\/div>\n\n\n\n<\/div>\n\n<\/code><\/pre>\n
    Step 2: Flex it<\/h4>\n
    Now, we need to make each grid cell a flex container. This will allow the inner part of the grid cell to take up the full height of its parent. We will also need to set the inner element to a width of 100%. This ensures that it will take up the full dimensions of its parent, both horizontally and vertically:<\/p>\n
    .grid-cell {\n  \/* Forces inner to take up full grid cell height *\/\n  display: flex;\n}\n\n.grid-cell-inner {\n  \/* Forces inner to take up full grid cell width *\/\n  width: 100%;\n}<\/code><\/pre>\n
    Let\u2019s see what we get if we try adding box shadows to the inner elements:<\/p>\n
    .grid-cell-inner {\n  box-shadow: 0 0 10px 3px blue;\n}<\/code><\/pre>\n
    \"\"
    Box shadows appear around grid cells but are getting cut off<\/figcaption><\/figure>\n
    That\u2019s much nicer, but it is still not quite there yet. The hidden overflow that we are using to prevent the Chrome bug is getting in the way.<\/p>\n
    Step 3: Hacky padding<\/h4>\n
    So, we need to allow overflow but still avoid this odd margin behavior. The only other safe way I\u2019ve found to do that is with padding. By adding 1px of padding to the top and bottom of the outer grid wrapper element, it will fix the Chrome bug.<\/p>\n
    .grid-wrapper {\n  \/* Prevents odd margin behaviour in Chrome *\/\n  padding: 1px 0;\n}<\/code><\/pre>\n
    This comes at the expense of having an extra 1px of space at the top and bottom of the grid. The image below demonstrates how this ends up looking. The shadows have been lightened to show the 1px gap more clearly.<\/p>\n
    \"\"
    1px of padding at the top and bottom of the grid<\/figcaption><\/figure>\n
    Note:<\/strong> You can avoid the 1px of top padding by opting not to include the top padding gap value on the grid element. The 1px of bottom padding can\u2019t be avoided though.<\/p>\n
    A border width applied to the outer grid wrapper will also work, so technically I didn\u2019t need to apply the padding to the example above. Most of the time, if we are applying a shadow to grid cells, then we probably don\u2019t want to see a border wrapped around them. The above example was more demonstrating how minor the padding is.<\/p>\n
    Update:<\/strong> You can avoid the odd margin behavior completely by using 0.1px worth of padding rather than 1px. This will get rounded down to 0px in the browser but still prevent the odd margin behavior from occurring. This means that the edges of the grid can sit hard up against the edges of it’s container whilst still allowing overflow content to be visible! Thanks to Lu Nelson for his suggestion in the comments<\/a>! 😁<\/p>\n
    This is what the grid looks like without the outer border:<\/p>\n
    \"\"
    3 x 2 shadow cell grid<\/figcaption><\/figure>\n
    \"\"
    2 x 3 shadow cell grid<\/figcaption><\/figure>\n
    \"\"
    1 x 6 shadow cell grid<\/figcaption><\/figure>\n
    Here is a Pen showing the final product:<\/p>\n
    See the Pen Fake grid with shadows<\/a> by Daniel Tonon (@daniel-tonon<\/a>) on CodePen<\/a>.<\/p>\n
    Gutter Grid shadows<\/h3>\n
    Let\u2019s cover how to add shadows on Gutter Grid cells. You can use the same HTML structure we used in the previous example.<\/p>\n
    Now, apply this SCSS to create a three-column grid that has a 20px gutter:<\/p>\n
    .grid {\n  @include grid(3, 20px, $inners: true);\n}<\/code><\/pre>\n
    This new $inners: true<\/code> property tells Gutter Grid that the grid cells each have a single child element that needs to take up the full height and width of its parent grid cell.<\/p>\n
    Instead of using overflow: hidden<\/code>, use 0.1px of bottom padding on the wrapper element (updated based on Lu Nelson’s suggestion<\/a>).<\/p>\n
    .grid-wrapper {\n  padding-bottom: 0.1px;\n}<\/code><\/pre>\n
    Gutter Grid will not output a top outer gutter if it doesn\u2019t need to. This helps avoid issues around the negative margin quirk. After all, if there is no top outer gutter to negate with a faulty negative margin, then there is no bug to worry about. The bottom outer gutter is still a problem, though, and that is why we need the 0.1px of bottom padding. This 0.1px of bottom padding gets rounded down to 0px in the browser while still fixing the margin quirk leading to no gap at the bottom of the grid.<\/p>\n
    Now, add your shadows and you\u2019ve got yourself a Gutter Grid with shadow cells!<\/p>\n
    .grid-cell-inner {\n  box-shadow: 0 0 10px 3px blue;\n}<\/code><\/pre>\n
    \"\"
    3 x 2 shadow cell grid<\/figcaption><\/figure>\n
    I\u2019ve only scraped the surface of what Gutter Grid can do in this article. Make sure to read the full documentation<\/a> to learn what else it\u2019s capable of.<\/p>\n
    We come to the end of our IE grid adventure<\/h3>\n
    I hope you have enjoyed this foray into the world of IE and CSS grid. Make sure to read through Part 1<\/a> and Part 2<\/a> if you haven\u2019t already. Having read all three articles, you will now be fully equipped to make some truly stunning layouts that look just as good in IE as they do in modern browsers.<\/p>\n
    If you ever see anyone complaining about not being able to use CSS grid because of IE, you know what to do. Playfully slap them on the head for being so foolish and send them here to get the truth.<\/p>\n
    Now go forth, my friends, and build some grids! 😃🎉<\/p>\n
    \n
    Article Series:<\/h4>\n
      \n
    1. \n      Debunking common IE Grid misconceptions<\/a><\/li>\n
    2. \n        CSS Grid and the new Autoprefixer <\/a><\/li>\n
    3. \n        Faking an auto-placement grid with gaps (This Post)<\/em><\/li>\n
    4. \n        Duplicate area names now supported!<\/a><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane. In Part 1, I covered some of the common misconceptions that people have about IE11\u2019s native CSS grid implementation. In Part 2, I showed the world how easy it actually is […]<\/p>\n","protected":false},"author":250795,"featured_media":273257,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The last of a three-part series on using Grid with IE: Faking an auto-Placement grid with gaps","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[686,1451],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":273108,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-debunking-common-ie-grid-misconceptions\/","url_meta":{"origin":273207,"position":0},"title":"CSS Grid in IE: Debunking Common IE Grid Misconceptions","date":"July 2, 2018","format":false,"excerpt":"This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":273125,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-css-grid-and-the-new-autoprefixer\/","url_meta":{"origin":273207,"position":1},"title":"CSS Grid in IE: CSS Grid and the New Autoprefixer","date":"July 4, 2018","format":false,"excerpt":"In Part 1 of this series, I debunked a few misconceptions that many people have around the Internet Explorer (IE) implementation of CSS grid. This article builds on that knowledge. It would be best to go back and read that article first if you haven\u2019t already. Today I\u2019m going to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":257333,"url":"https:\/\/css-tricks.com\/browser-compatibility-css-grid-layouts-simple-sass-mixins\/","url_meta":{"origin":273207,"position":2},"title":"Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins","date":"August 8, 2017","format":false,"excerpt":"According to an article from A List Apart about CSS Grid, a \"new era in digital design is dawning right now.\" With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There's an entirely new system available for\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":353179,"url":"https:\/\/css-tricks.com\/quickly-testing-css-fallbacks\/","url_meta":{"origin":273207,"position":3},"title":"Quickly Testing CSS Fallbacks","date":"October 4, 2021","format":false,"excerpt":"Dumb trick alert! Not all browsers support all features. Say you want to write a fallback for browsers that doesn't support CSS Grid. Not very common these days, but it's just to illustrate a point. You could write the supporting CSS in an @supports blocks: @supports (display: grid) { .blocks\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-04-at-7.23.22-AM.png?fit=1200%2C785&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282730,"url":"https:\/\/css-tricks.com\/ie10-compatible-grid-auto-placement-with-flexbox\/","url_meta":{"origin":273207,"position":4},"title":"IE10-Compatible Grid Auto-Placement with Flexbox","date":"February 18, 2019","format":false,"excerpt":"If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+! Now, it's not actually CSS Grid, but without looking at the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278973,"url":"https:\/\/css-tricks.com\/css-grid-in-ie-duplicate-area-names-now-supported\/","url_meta":{"origin":273207,"position":5},"title":"CSS Grid in IE: Duplicate area names now supported!","date":"November 26, 2018","format":false,"excerpt":"Autoprefixer is now up to version 9.3.1 and there have been a lot of updates since I wrote the original three-part CSS Grid in IE series \u2014 the most important update of which is the new grid-areas system. This is mostly thanks to Bogdan Dolin, who has been working like\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/ie-tiles.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273207"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250795"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=273207"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273207\/revisions"}],"predecessor-version":[{"id":331294,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273207\/revisions\/331294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273257"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=273207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=273207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=273207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}