Comments (4)
Hi @equinusocio, I'm curious to the reasoning behind this - is it because your project uses a "mobile first" breakpoint philosophy?
Also, how could you see this being implemented into Masonry (ie. what props / interface would this component have to support this)? Thanks!
from react-masonry-css.
Yes, I follow mobile-first approach with custom breakpoints. Right now I have to set the default columns to be the highest number of columns i need. Like this:
columns: {
default: 6,
980: 5,
740: 4,
480: 3,
320: 1,
}
Is a bit "controversial" when you work with mobile-first, where I would set the default number of columns to be the smallest one, on mobile:
columns: {
1400: 6,
980: 5,
740: 4,
480: 3,
default: 1,
}
Maybe a simple boolean prop like mobileFirst
would be enought
from react-masonry-css.
"controversial"? Mobile-first has been recognized as the "right way" for like fifteen years.
The reasoning, incidentally, is that when you go desktop first, the browser has to summarize the styles from the default values first, then the next largest, then the next largest, down the line until you get to the "small" screen.
That's more computation than "start from the default values, then stop because every succeeding query is bigger than you." Given that phones are more power-constrained than larger ones, it's more power and CPU efficient.
from react-masonry-css.
"controversial"? Mobile-first has been recognized as the "right way" for like fifteen years.
The reasoning, incidentally, is that when you go desktop first, the browser has to summarize the styles from the default values first, then the next largest, then the next largest, down the line until you get to the "small" screen.
That's more computation than "start from the default values, then stop because every succeeding query is bigger than you." Given that phones are more power-constrained than larger ones, it's more power and CPU efficient.
That's why setting desktop first breakpoints on this lib is controversial. But it seems abandoned like many other libs.
from react-masonry-css.
Related Issues (20)
- [Masonry] The property "columnClassName" requires a string - Error shows in Chrome console HOT 2
- Publish react 17 peer dependency fix to npm HOT 5
- very different columns height HOT 1
- ie11 support HOT 2
- Add support for css modules HOT 3
- height of div would take equal to image height mean while image is loading. HOT 4
- 'Masonry' cannot be used as a JSX component HOT 2
- breakpoint for column not working HOT 1
- Is there a way to draw a solid vertical line between columns? HOT 1
- Does anybody use with next/image? it doesn't work. HOT 4
- Fixed width according to number of breakpoints
- Long item in first column causes gaps in other columns HOT 5
- Latest version of TypeScript causing errors HOT 1
- Changing column count calculation to depend on container width instead of window width HOT 2
- Add support for logic operator regarding responsive columns
- some elements can occupy more than one column
- Thank you
- Next.js Elements being in components breaks column render
- Balancing of total items height in each column is broken :-(
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-masonry-css.