Using CSS grid is a fast and easy way to layout things on the screen. It allows you to arrange and organize in the most logical way possible items such as headers, texts, buttons, text boxes, pictures or icons. So if you are bored with ordinary grid designs, here are 20 Outstanding CSS Grid Designs & Effects for inspiration.

Final Tiles Grid Gallery

CSS Grid Responsive Perspective layout

CSS responsive grid of hexagons

Beautiful Portraits grid

Grid, Flex, and background patterns

Responsive gallery with CSS Grids

Curtain

Using CSS Grid as a mask

Cool Layout with Complex Chainable Animation

Comic book style layout

Experiment No. 1

Fully Responsive Expandable Grid Layout

Column Count

Pure CSS Perspective Portfolio v2

Expanding card page transition effect

Split Image | Hover Effect

Clip-path: Diamond grid

Custom Grid Layout

Lightbox Widget

Grid with Background-Image