Native CSS masonry layout

2 years ago

source link: https://pawelgrzybek.com/native-css-masonry-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Native CSS masonry layout

Published: 2023.02.09 · 2 minutes read

A masonry type of layout, one of the biggest obsessions of UX designers, is finally coming to CSS. Style popularized by Pinterest, where elements fill the vertical gaps instead of being aligned to the row axis.

A default layout alignment vs masonry

Over the years, we have seen a lot of JavaScript-based solutions to achieve this effect. Masonry by David DeSandro is the most popular one. I created Bricky seven years ago (WOW, time flies 🤯) that solves the same problem. Luckily we can start thinking about getting rid of these hefty libraries.

The grid-template-rows: masonry and grid-template-columns: masonry, defined as part of the CSS Grid Layout Module Level 3, are the modern solution for bricklayer-like designs. At the time of writing this article, the feature is available only in Firefox behind the layout.css.grid-template-masonry-value.enabled flag and Safari Technology Preview.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: masonry;
}

Keep in mind accessibility — the default (pack) item placement algorithm may cause an unintended tabbing order. Luckily, a masonry-auto-flow gives us granular control over the item’s placement.

I miss writing about CSS. This language gets more and more incredible features at an unstoppable rate, so expect more posts about it.

Buy me a coffee

[css-grid-2] Masonry layout · Issue #4650 · w3c/csswg-drafts

Overview This is a proposal to extend CSS Grid to support masonry layout in one of the axes while doing normal grid layout in the other. I'll use grid-template-rows/columns: masonry to specify the...

developer.mozilla.org 4 years ago
Cache

Masonry Layout - CSS: Cascading Style Sheets | MDN

Masonry Layout Level 3 of the CSS Grid Layout specification includes a masonry value for

reactnativeexample.com 3 years ago
Cache

Pinterest like masonry listview made in React Native

react-native-masonry-list Pinterest like listview made in React Native. It just behaves like the FlatList so it is easy to use. Installation yarn add @react-native-seoul/masonry-list

reactnativeexample.com 3 years ago
Cache

The Masonry List implementation which looks like the FlatList in React Native

react-native-masonry-list Pinterest like listview made in React Native. It just behaves like the FlatList so it is easy to use. Installation yarn add @react-native-seoul/masonry-list