Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ?

Say I want the following design on a large screen :

enter image description here

Which turns into that on a mobile screen :

enter image description here

Columns make sense to me ; I can make my blocks span as many of them as needed, but aren't rows specific to one screen size ?

share|improve this question
1  
This is what can make using grids for responsive design difficult or confusing. Just call a horse a horse and don't worry about it. –  Rob Feb 21 '13 at 15:15
add comment

2 Answers

Line height, so there's a consistent vertical rhythm. You can scale that proportionally, as with other dimensions.

share|improve this answer
    
Why the down votes? Please add comments if my answer is wrong. –  GDav Jan 24 '13 at 8:40
    
I don't know who downvoted. So you're saying that blocs don't need to reside in a specific "row" ? –  Manu Jan 27 '13 at 16:16
    
@Manu No, the opposite really. If you drew a layout on ruled notepaper, using the lines to impart a regular vertical spacing, you could maintain the regularity of the spacing even if you re-arranged the elements of the design. You could even alter that spacing in proportion to the width of the overall design, if you wanted to. –  GDav Jan 29 '13 at 8:33
add comment

Rows hold all data in one heap. Also, you can threat row as 100% width column if you wish to.

Also, because of row, you can do CSS magic with :first-child selector for instance. You have to use it if you have, let's say, 4 columns, every 25% wide, but you want only 3 margins (between 1st and 2nd, 2nd and 3rd, 3rd and 4th column). Notice that you DON'T want margin after 4th column (because it would be asymmetric ). Then, you target first column (first child) of the row and give him in CSS {margin-left: 0;}, the other ones have margin-left set. Columns are wide 22% and margins are 4% which equals 22*4 + 4*3 = 88 + 12 = 100%.

Another example that I can see right now is when you want to group "cells" or columns in some way. It's often case, but the most representative example is probably navigation bar: You will give some class to entire row (background of navigation, etc.) and you will give some class for every single cell (hover, color etc.) In that case, on every resolution, buttons/cells will be in bar/row and site will be displayed nicely.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.