--- title: Best CSS-Tricks posts — August 2022 | daily.dev description: The most upvoted CSS-Tricks posts from August 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2022/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2022/08 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — August 2022 | daily.dev og:description: The most upvoted CSS-Tricks posts from August 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — August 2022 1. 1 [](https://daily.dev/posts/css-grid-and-custom-shapes-part-1-css-tricks-7ab1cuztv "CSS Grid and Custom Shapes, Part 1 | CSS-Tricks") Article CSS-Tricks · 4y CSS Grid and Custom Shapes, Part 1 | CSS-Tricks CSS Grid of Hexagons is a type of grid that works with shapes like hexagons or rhombuses. The goal of this post is to use the same and smallest amount of HTML code and still get the different grids we want. Each image is translated by the --\_x and --\_y variables that are based on those formulas. Only the second image ( nth-child(2) is undefined in any selector. The second image is undefined. It can be any image. It could be any photo. 27 2. 2 [](https://daily.dev/posts/css-grid-and-custom-shapes-part-2-css-tricks-aiqdvprqr "CSS Grid and Custom Shapes, Part 2 | CSS-Tricks") Article CSS-Tricks · 4y CSS Grid and Custom Shapes, Part 2 | CSS-Tricks CodePen Embed Fallback uses CSS Grid, clip-path and mask techniques to create grids with fancy shapes. By the end of this article, we’ll end up with different ways to arrange images on the grid, including some rad hover effects that make for an authentic, interactive experience to view pictures. The code is easy to understand, but there is a little drawback. The border color needs to be the same as the main background to make the illusion perfect. This little drawback is. 15 1 3. 3 [](https://daily.dev/posts/committing-css-crimes-css-tricks-2lnsz6hdx "Committing CSS Crimes | CSS-Tricks") Article CSS-Tricks · 4y Committing CSS Crimes | CSS-Tricks Social media service Cohost allows users to have greater freedom with markup and inline styles than we may be typically used to. Some users have taken advantage of this freedom to commit CSS Crimes! It has resulted in creative recreations of familiar interfaces and interactive games by using properties in unconventional ways. 12 4. 4 [](https://daily.dev/posts/zooming-images-in-a-grid-layout-css-tricks--y1kdrrrz "Zooming Images in a Grid Layout | CSS-Tricks") Article CSS-Tricks · 4y Zooming Images in a Grid Layout | CSS-Tricks CSS Grid is capable of automatically placing items on implicit rows and columns. The browser will first ignore min-height: 100% to calculate the size of the grid cells, but it will use the height: 0 in its calculation. But you said that the image size needs to be 0\. But I am making an exception for the hovered image. 12 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2022/08#page","url":"https://daily.dev/sources/css_tricks/best-of/2022/08","name":"Best CSS-Tricks Posts — August 2022","description":"The most upvoted CSS-Tricks posts from August 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2022/08#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/css-grid-and-custom-shapes-part-1-css-tricks-7ab1cuztv","name":"CSS Grid and Custom Shapes, Part 1 | CSS-Tricks"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/css-grid-and-custom-shapes-part-2-css-tricks-aiqdvprqr","name":"CSS Grid and Custom Shapes, Part 2 | CSS-Tricks"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/committing-css-crimes-css-tricks-2lnsz6hdx","name":"Committing CSS Crimes | CSS-Tricks"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/zooming-images-in-a-grid-layout-css-tricks--y1kdrrrz","name":"Zooming Images in a Grid Layout | CSS-Tricks"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"August 2022"}]}]} ```