: What are "rows" in a responsive grid system? 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

@Gloria169

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.

Vote Up Vote Down

@Michele947

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

Vote Up Vote Down