11 April 2017 / layout

Responsive Pure CSS Masonry Layout

Responsive column masonry layout with CSS column count.

Masonry layouts have been around a long time. You'll most likely recognize its use on Pinterest. In fact, Pinterest so popularized the use of this layout that it’s also known as the “Pinterest style layout”.

While a simple layout in theory (“maybe we can just use floats?”), CSS does not actually make this easy to implement. Using floats will not reduce the spaces between differently sized items. Instead you will end up with something along the lines of this:

Responsive Pure CSS Masonry Layout

codepen

See the Pen Responsive Pure CSS Masonry Layout - Column Count by Stephanie (@ramenhog) on CodePen.

— Code Tea —

layout

04 February 2020

CSS Grid Experiment: Keyboard Layout

CSS Grid Experiment: Keyboard Layout.

31 August 2018

Thumbnail Presentation with CSS Grid

This should work with older browsers as far as IE9. Older browsers and non-supporting browsers will get a "conservative" design instead.

29 August 2018

Cool Layout with Complex Chainable Animation

Based on addition of just 2 classes with JS (and simple hover) this demo features a lot of cool chaining animations, combined with good performance and sort-of easy-to-maintain SCSS.

— Next Post — — Prev Post —

06 April 2017

Parallax shapes with mouse move

Parallax shapes with mouse move Move elements with mouse move and parallax. Coded version of this dribble shot --> https://dribbble.com/shots/3366304--Made-You-Look-60-De-code codepen See the Pen DECODE (parallax shapes) by