I also could justify my designs more, and make them pixel perfect. …And here’s huge list of other systems you can look throughĪfter fully understanding how grids work, I’ve become a better designer because I knew how my designs would translate between the breakpoints. To help with your understanding, here are some design systems that outline their grid usage: The best thing you can do is to start noticing how other sites align elements on their page, and you will start to see the patterns.
#CHANGE DESKTOP WINDOWS GRID SIZE HOW TO#
I searched YouTube videos and read plenty of articles, but everyone focused on why it was important and less about the “rules” of how to use the grid. I know for me it took me many years, and a decent amount of coding to understand how grids worked. The goal here was to provide some guidance on how to use grids in responsive design. I’m pretty sure Instagram can get away with 6 thick columns on desktop. But what happens for when your browser is one pixel smaller, at 1199px? Fixed Grid So right now what you’re seeing is a design with content width of something slightly smaller than 1200px, with a ton of margin because you’re looking with a big monitor. Let’s say for example you have a large monitor that sees things at 1600px wide, your desktop design is at 1200px wide, tablet is at 768px wide, and mobile is at 360px wide. In reality, the web must render for any browser width. These breakpoints are the point of reference in code. If you wanted, you could also get creative and choose to only show one card on mobile, or do a horizontal scroll. On mobile the answer is easy too, you would just show one card, and the rest stacked beneath it. Yay! You didn’t need to do any resizing, because you already knew that it sat on four columns.
If a set of three cards sat on 4 columns each on desktop, on tablet you would show two cards and wrap the third one so that it’d show on a second row. Why? And how does that work? This was to make things easier when you designed. In a traditional design grid, the column widths and gutters stay the same, just the number of columns change.
0 kommentar(er)
