SAT GRIDDED RESPONSE HOW TO

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.

SAT GRIDDED RESPONSE 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.

Sat gridded response