Row and 12-columns grid

Traditionally, we divide our layout into rows. Inside each row, there are 12 columns.

1. Rows are the space lay out from top to bottom.
2. Columns are the space inside each row, lay out fro left to right.
3. All content are put into columns.

Here is an example of dividing a layout into rows and 12-columns. We can further nest row inside columns and inside the nested row, we use 12-columns too. All the numbers are add up to be 12, or multiple of 12.