{"id":3024,"date":"2022-04-23T05:27:59","date_gmt":"2022-04-23T05:27:59","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3024"},"modified":"2023-06-10T13:02:52","modified_gmt":"2023-06-10T13:02:52","slug":"css-tutorial-thinking-outside-the-box-with-css-grid","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-thinking-outside-the-box-with-css-grid\/","title":{"rendered":"CSS Tutorial &#8211; Thinking Outside the Box with CSS Grid"},"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; Great\u00a0<a href=\"https:\/\/frontend.horse\/articles\/thinking-outside-the-box-with-css-grid\/\" rel=\"noopener\">tutorial<\/a>\u00a0from Alex Trost (based on some demos,\u00a0<a href=\"https:\/\/codepen.io\/andybarefoot\/pen\/oNjxYYG\" rel=\"noopener\">like this one<\/a>, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal lines rather than horizontal and vertical lines because of the staggering. And you still get all the flexibility of grid!<\/p>\n<h2 id=\"responsive-book-grid\">Responsive Book Grid<\/h2>\n<p>Before we get into the technical aspects of this pen, I want to pause and appreciate this piece\u2019s brilliant design. The shapes and color combinations are excellent, and he\u2019s chosen some gorgeous book covers that add to the quality feel.<\/p>\n<p>Here\u2019s the actual pen in action.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">:root {\r\n  --columns: 3;\r\n  --yellow: rgba(238, 188, 31, 1);\r\n  --pink: rgba(255, 82, 145, 1);\r\n  --blue: rgba(64, 98, 187, 1);\r\n  --green: rgba(6, 141, 126, 1);\r\n  --white: rgba(248, 255, 229, 1);\r\n}\r\n\r\nbody{\r\n  background-color: #182028;\r\n}\r\n\r\nul{\r\n  display:grid;\r\n  grid-template-columns: repeat(var(--columns),1fr);\r\n  margin: 200px -40px;\r\n}\r\n\r\nli{\r\n  grid-column-end: span 2;\r\n  position: relative;\r\n  width: 100%;\r\n  padding-bottom: 100%;\r\n  margin-top: -50%;\r\n}\r\n\r\nli:nth-child(2n){\r\n  grid-column-start:2;\r\n}\r\n\r\nli::before, li::after {\r\n  content:'';\r\n  position: absolute;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-size: 50% 100%,50% 100%;\r\n  background-position: left, right;\r\n}\r\n\r\nli::before{\r\n  z-index: -10;\r\n  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);\r\n  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);\r\n  background-repeat: no-repeat;\r\n  background-image: linear-gradient(-45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%), linear-gradient(45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%);\r\n}\r\n\r\nli::after{\r\n  clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);\r\n  -webkit-clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);\r\n  background-repeat: no-repeat;\r\n  background-image: linear-gradient(45deg,var(--yellow) 40%,var(--green) 40%), linear-gradient(-45deg,var(--yellow) 40%,var(--green) 40%);\r\n}\r\n\r\nli:nth-child(2n)::before{\r\n  background-image: linear-gradient(-45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%), linear-gradient(45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%);\r\n}\r\n\r\nli:nth-child(2n)::after{\r\n  background-image: linear-gradient(45deg,var(--pink) 40%,var(--blue) 40%), linear-gradient(-45deg,var(--pink) 40%,var(--blue) 40%);\r\n}\r\n\r\nli:nth-child(5n)::before{\r\n  background-image: linear-gradient(-45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%), linear-gradient(45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%);\r\n}\r\n\r\nli:nth-child(5n)::after{\r\n  background-image: linear-gradient(45deg,var(--green) 40%,var(--pink) 40%), linear-gradient(-45deg,var(--green) 40%,var(--pink) 40%);\r\n}\r\n\r\nli:nth-child(7n)::before,li:nth-child(7n-4)::before{\r\n  background-image: linear-gradient(-45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%), linear-gradient(45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%);\r\n}\r\n\r\nli:nth-child(7n)::after,li:nth-child(7n-4)::after{\r\n  background-image: linear-gradient(45deg,var(--blue) 40%,var(--white) 40%), linear-gradient(-45deg,var(--blue) 40%,var(--white) 40%);\r\n}\r\n\r\nli:nth-child(9n)::before,li:nth-child(9n-5)::before{\r\n  background-image: linear-gradient(-45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%), linear-gradient(45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%);\r\n}\r\n\r\nli:nth-child(9n)::after,li:nth-child(9n-5)::after{\r\n  background-image: linear-gradient(45deg,var(--white) 40%,var(--green) 40%), linear-gradient(-45deg,var(--white) 40%,var(--green) 40%);\r\n}\r\n\r\nimg{\r\n  position: absolute;\r\n  width: 43%;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translateX(-50%) translateY(-60%);\r\n  box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3);\r\n  transition-property: transform;\r\n  transition-duration: .3s;\r\n}\r\n\r\nimg:hover{\r\n  transform: translateX(-40%) translateY(-70%) rotatez(25deg);\r\n}\r\n@media (min-width:450px){\r\n  ul{\r\n    margin: 190px 40px;\r\n  }\r\n}\r\n@media (min-width:600px){\r\n  :root {\r\n    --columns: 5;\r\n  }\r\n  li:nth-child(2n){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(4n-1){\r\n    grid-column-start:2;\r\n  }\r\n}\r\n@media (min-width:900px){\r\n  :root {\r\n    --columns: 7;\r\n  }\r\n  li:nth-child(4n-1){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(6n-2){\r\n    grid-column-start:2;\r\n  }\r\n}\r\n@media (min-width:1200px){\r\n  :root {\r\n    --columns: 9;\r\n  }\r\n  li:nth-child(6n-2){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(8n-3){\r\n    grid-column-start:2;\r\n  }\r\n}\r\n@media (min-width:1500px){\r\n  :root {\r\n    --columns: 11;\r\n  }\r\n  li:nth-child(8n-3){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(10n-4){\r\n    grid-column-start:2;\r\n  }\r\n}\r\n@media (min-width:1800px){\r\n  :root {\r\n    --columns: 13;\r\n  }\r\n  li:nth-child(10n-4){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(12n-5){\r\n    grid-column-start:2;\r\n  }\r\n}\r\n@media (min-width:2100px){\r\n  :root {\r\n    --columns: 15;\r\n  }\r\n  li:nth-child(12n-5){\r\n    grid-column-start:auto;\r\n  }\r\n  li:nth-child(14n-6){\r\n    grid-column-start:2;\r\n  }\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - Mixing Colors in Pure CSS 04\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/MWVPmwV?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/MWVPmwV\"><br \/>\nCSS Tutorial &#8211; Mixing Colors in Pure CSS 04<\/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<p>We\u2019ll break down these techniques:<\/p>\n<ul>\n<li>How he sets up the grid<\/li>\n<li>How he fits the diamonds together<\/li>\n<li>How he makes the diamond shapes<\/li>\n<\/ul>\n<h3 id=\"fitting-the-shapes-together\">Fitting the Shapes together<\/h3>\n<p>So we see how the grid is set up, but how does he fit them perfectly together like this?<\/p>\n<p>Two steps:<\/p>\n<ol>\n<li>Shift every other row so that it starts in the second column with\u00a0<code class=\"language-text\">grid-column-start: 2<\/code>.<\/li>\n<li>Set\u00a0<code class=\"language-text\">margin-top: -50%<\/code>\u00a0on all list items to move them up by half their height.<\/li>\n<\/ol>\n<p>Here\u2019s a demo to see it in action.<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - Deconstructing Responsive CSS Grid - Books\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/wvmYdzd?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/wvmYdzd\"><br \/>\nCSS Tutorial &#8211; Deconstructing Responsive CSS Grid &#8211; Books<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><br \/>\nYou can see how Andy takes the grid of diamonds and shifts them to fit snugly together. The white dotted line outlines each grid item, so you can see how they overlap one another.<\/p>\n<h3 id=\"making-the-shapes\">Making the Shapes<\/h3>\n<p>Now that we know how Andy\u2019s arranging the shapes let\u2019s talk about how he\u2019s creating them. He\u2019s making the shape behind the book with the\u00a0<code class=\"language-text\">li:before<\/code>\u00a0pseudo element, and the V shape at the bottom with the\u00a0<code class=\"language-text\">li:after<\/code>\u00a0element. Hover over this demo to separate the pieces.<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - Deconstructing Book Image\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/MWVPmbX?default-tab=result&amp;theme-id=dark\" height=\"400\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/MWVPmbX\"><br \/>\nCSS Tutorial &#8211; Deconstructing Book Image<\/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<h2 id=\"isometric-shoe-display\">Isometric Shoe Display<\/h2>\n<p>Someone else might make a joke about a man named Barefoot making a gallery of shoes, but I\u2019m far too mature for puns.<\/p>\n<p>Once again, Andy comes up with a brilliant way to display products on the web.<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - CodePen Home Isometric eCommerce CSS Grid\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/VwXEbPY?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/VwXEbPY\"><br \/>\nCSS Tutorial &#8211; CodePen Home Isometric eCommerce CSS Grid<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe>The cubes might make it difficult to tell how he\u2019s pulling this one off, so let\u2019s add some borders to the elements.<\/p>\n<h2 id=\"wrap-up\">Wrap Up<\/h2>\n<p>We checked out three awesome pieces that all use CSS Grid in novel ways. By staggering the starting column, or skewing the entire grid, you can get some pretty fantastic results. I\u2019m excited to see the new ways developers utilize CSS Grid as it gets implemented on more and more production sites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Great\u00a0tutorial\u00a0from Alex Trost (based on some demos,\u00a0like this one, <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-thinking-outside-the-box-with-css-grid\/\" title=\"CSS Tutorial &#8211; Thinking Outside the Box with CSS Grid\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":4407,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,20],"tags":[269,268,199,197,103,227],"newstopic":[573],"class_list":["post-3024","post","type-post","status-publish","format-standard","has-post-thumbnail","category-html-css","category-javascript","tag-book-grid","tag-css-grid","tag-css-grid-layout","tag-css-tutorial","tag-web-design","tag-web-designer","newstopic-css"],"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3024","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=3024"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3024\/revisions"}],"predecessor-version":[{"id":4495,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3024\/revisions\/4495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4407"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3024"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}