{"id":3470,"date":"2021-02-11T14:07:49","date_gmt":"2021-02-11T14:07:49","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3470"},"modified":"2023-02-28T05:27:05","modified_gmt":"2023-02-28T05:27:05","slug":"css-tutorial-css-grid-layout-with-support-flexbox-fallback","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-css-grid-layout-with-support-flexbox-fallback\/","title":{"rendered":"CSS Tutorial &#8211; CSS Grid Layout with @support flexbox fallback"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Gustaf Holm made these CSS tooltips that slide down in a smoothly animated fashion. Throughout the design, the same element of bottom tooltips is maintained, which results in a uniform appearance. CSS grid layout with gradient flex boxes is the standard.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - CSS Grid Layout with @support flexbox fallback\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/ExLyXxZ?default-tab=result&amp;theme-id=dark\" height=\"800\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/ExLyXxZ\"><br \/>\nCSS Tutorial &#8211; CSS Grid Layout with @support flexbox fallback<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@supports (display: grid) {\r\n\r\n  .grid {\r\n    display: grid;\r\n    grid-gap: 1.5vw;\r\n    min-height: 100vh;\r\n    padding: 1.5vw;\r\n  }\r\n\r\n  .grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));\r\n    grid-template-areas:\r\n      \"hero   hero\"\r\n      \"big1   big1\"\r\n      \"med1   med1\"\r\n      \"med2   med2\"\r\n      \"small1 small2\"\r\n      \"small3 small4\"\r\n      \"small5 small6\"\r\n      \"small7 small8\"\r\n      \"small9 small10\";\r\n  }\r\n\r\n  @media screen and (min-width: 750px) {\r\n    .grid {\r\n      grid-template-columns: repeat(5, 1fr);\r\n      grid-template-rows: repeat(5, 25vh);\r\n      grid-template-areas:\r\n        \"hero   hero   hero   med1   med1\"\r\n        \"hero   hero   hero   med2   med2\"\r\n        \"big1   big1   big1   big1   big1\"\r\n        \"small1 small2 small3 small4 small5\"\r\n        \"small6 small7 small8 small9 small10\";\r\n    }\r\n  }\r\n\r\n  @media screen and (min-width: 1400px) {\r\n    .grid {\r\n      grid-template-columns: repeat(6, 1fr);\r\n      grid-template-rows: auto;\r\n      grid-template-areas:\r\n      \"small1 hero   hero hero med1   med1\"\r\n      \"small2 hero   hero hero med2   med2\"\r\n      \"small3 small5 big1 big1 small7 small8\"\r\n      \"small4 small6 big1 big1 small9 small10\";\r\n    }\r\n  }\r\n\r\n  .grid .item:nth-child(1)  { grid-area: hero; }\r\n  .grid .item:nth-child(2)  { grid-area: big1; }\r\n  .grid .item:nth-child(3)  { grid-area: med1; }\r\n  .grid .item:nth-child(4)  { grid-area: med2; }\r\n  .grid .item:nth-child(5)  { grid-area: small1; }\r\n  .grid .item:nth-child(6)  { grid-area: small2; }\r\n  .grid .item:nth-child(7)  { grid-area: small3; }\r\n  .grid .item:nth-child(8)  { grid-area: small4; }\r\n  .grid .item:nth-child(9)  { grid-area: small5; }\r\n  .grid .item:nth-child(10) { grid-area: small6; }\r\n  .grid .item:nth-child(11) { grid-area: small7; }\r\n  .grid .item:nth-child(12) { grid-area: small8; }\r\n  .grid .item:nth-child(13) { grid-area: small9; }\r\n  .grid .item:nth-child(14) { grid-area: small10; }\r\n\r\n}\r\n\r\n\/* flexbox fallback is the browser does not support display:grid *\/\r\n@supports not (display: grid) {\r\n\r\n  .grid {\r\n    display: flex;\r\n    flex-flow: row wrap;\r\n    min-height: 100vh;\r\n    padding: 0.75vw;\r\n  }\r\n\r\n  .grid .item {\r\n    min-height: 20vh;\r\n    margin: 0.75vw;\r\n  }\r\n\r\n  .grid .item:nth-child(1)  { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }\r\n  .grid .item:nth-child(2)  { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }\r\n  .grid .item:nth-child(3)  { flex: 0 1 calc(100% - 1.5vw); }\r\n  .grid .item:nth-child(4)  { flex: 0 1 calc(100% - 1.5vw); }\r\n  .grid .item:nth-child(5)  { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(6)  { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(7)  { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(8)  { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(9)  { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(10) { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(11) { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(12) { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(13) { flex: 0 1 calc(50% - 1.5vw); }\r\n  .grid .item:nth-child(14) { flex: 0 1 calc(50% - 1.5vw); }\r\n\r\n  @media screen and (min-width: 750px) {\r\n    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }\r\n    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }\r\n  }\r\n\r\n  @media screen and (min-width: 1400px) {\r\n    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }\r\n    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); }\r\n    .grid .item:nth-child(3)  { flex: 0 1 calc(50% - 1.5vw); }\r\n    .grid .item:nth-child(4)  { flex: 0 1 calc(50% - 1.5vw); }\r\n    .grid .item:nth-child(5)  { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(6)  { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(7)  { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(8)  { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(9)  { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(10) { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(11) { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(12) { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(13) { flex: 0 1 calc(25% - 1.5vw); }\r\n    .grid .item:nth-child(14) { flex: 0 1 calc(25% - 1.5vw); }\r\n  }\r\n\r\n}\r\n\r\n\/* Styles, just for fun *\/\r\n\r\n*,*:before,*:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n  background: #29343d;\r\n}\r\n\r\n@supports not (display: grid) {\r\n  body:before {\r\n    content: 'Sorry, seems like your browser doesn\\'t support display: grid. Below is the flexbox fallback.';\r\n    display: block;\r\n    padding: 2rem 2rem 0;\r\n    color: #ffffff;\r\n    text-align: center;\r\n  }\r\n}\r\n\r\n.header {\r\n  margin: 10vh 1.5vw;\r\n  text-align: center;\r\n  color: #cedfe9;\r\n}\r\n\r\n.header h1,\r\n.header h2 {\r\n  margin: 0;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.2em;\r\n  line-height: 1;\r\n}\r\n\r\n.header h1 {\r\n  position: relative;\r\n  padding-bottom: 0.5em;\r\n  color: #ffffff;\r\n  font-size: 2rem;\r\n}\r\n\r\n.header h2 {\r\n  font-weight: normal;\r\n  font-size: 0.875rem;\r\n}\r\n\r\n@media screen and (min-width: 750px) {\r\n\r\n  .header h1 {\r\n    font-size: 3.75rem;\r\n  }\r\n\r\n  .header h2 {\r\n    font-weight: normal;\r\n    font-size: 1.125rem;\r\n    letter-spacing: 0.5em;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 1400px) {\r\n\r\n  .header h1 {\r\n    font-size: 6rem;\r\n  }\r\n\r\n  .header h2 {\r\n    font-weight: normal;\r\n    font-size: 1.5rem;\r\n  }\r\n}\r\n\r\n.box {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n}\r\n\r\n.diamond {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  z-index: 2;\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 5px;\r\n  border: 1px solid #ffffff;\r\n  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);\r\n  background-image: linear-gradient(to top left, #ddd 0%, #fff 100%);\r\n  text-align: center;\r\n  transform-origin: center;\r\n  transform: rotateZ(45deg);\r\n  transition: box-shadow 250ms, transform 250ms;\r\n}\r\n\r\n.diamond span {\r\n  font-weight: bold;\r\n  transform: rotateZ(-45deg)\r\n}\r\n\r\n.grid .item:hover .diamond,\r\n.grid .item:focus .diamond {\r\n  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);\r\n  transform:  rotateZ(45deg) scale(1.2);\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  z-index: 1;\r\n  padding: 0.25rem 1rem;\r\n  border-radius: 5px;\r\n  background: #29343d;\r\n  opacity: 0;\r\n  color: #cedfe9;\r\n  font-size: 0.875rem;\r\n  transition: opacity 500ms, transform 500ms;\r\n}\r\n\r\n.tooltip:before {\r\n  content: '';\r\n  position: absolute;\r\n  top: -9px;\r\n  left: calc(50% - 10px);\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 10px solid transparent;\r\n  border-right: 10px solid transparent;\r\n  border-bottom: 10px solid #29343d;\r\n}\r\n\r\n.grid .item:hover .tooltip,\r\n.grid .item:focus .tooltip {\r\n  opacity: 1;\r\n  transform: translateY(70px);\r\n}\r\n\r\n.grid .item {\r\n  position: relative;\r\n  padding: 1vw;\r\n  background-position:  left bottom;\r\n  background-size: 150% 100%;\r\n  transition: background 500ms, outline 500ms;\r\n  background-position: top left;\r\n  outline: transparent;\r\n}\r\n\r\n.grid .item:hover,\r\n.grid .item:focus {\r\n  background-position: top right;\r\n}\r\n\r\n.grid .item:focus {\r\n  outline: 2px solid #3eabfa;\r\n}\r\n\r\n.grid .item:nth-child(1)  { background-image: linear-gradient(45deg, #cbabfb 0%, #fb7ef6 60%); }\r\n.grid .item:nth-child(2)  { background-image: linear-gradient(45deg, #fb7ef6 0%, #cbabfb 60%); }\r\n.grid .item:nth-child(3)  { background-image: linear-gradient(45deg, #70c1fb 0%, #79ebe0 60%); }\r\n.grid .item:nth-child(4)  { background-image: linear-gradient(45deg, #79ebe0 0%, #70c1fb 60%); }\r\n.grid .item:nth-child(5),\r\n.grid .item:nth-child(6),\r\n.grid .item:nth-child(7),\r\n.grid .item:nth-child(8),\r\n.grid .item:nth-child(9),\r\n.grid .item:nth-child(10),\r\n.grid .item:nth-child(11),\r\n.grid .item:nth-child(12),\r\n.grid .item:nth-child(13),\r\n.grid .item:nth-child(14) { background-image: linear-gradient(45deg, #feeeab 0%, #fb7eb3 60%); }<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Gustaf Holm made these CSS tooltips that slide down <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-css-grid-layout-with-support-flexbox-fallback\/\" title=\"CSS Tutorial &#8211; CSS Grid Layout with @support flexbox fallback\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3831,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[346,344,268,197,103,227],"newstopic":[],"class_list":["post-3470","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css","tag-support-flexbox-fallback","tag-animate-css","tag-css-grid","tag-css-tutorial","tag-web-design","tag-web-designer"],"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3470"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3470\/revisions"}],"predecessor-version":[{"id":3472,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3470\/revisions\/3472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3831"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3470"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}