Layout
Grid system
Structuring designs around a single, unifying grid creates visual rhythm and a sense of consistency, and enables users to quickly grasp unfamiliar layouts. We use the grid defined by standard practice: a responsive grid system that expands from one column at narrow screen widths up to 12 columns.
Balanced Grid System
Varied Grid System
Symmetric Grid System
Asymmetric Grid System
Tiled Grid System
```
.nxt-col-1 {width: 8.33%; float:left;}
.nxt-col-2 {width: 16.66%; float:left;}
.nxt-col-3 {width: 25%; float:left;}
.nxt-col-4 {width: 33.33%; float:left;}
.nxt-col-5 {width: 41.66%; float:left;}
.nxt-col-6 {width: 50%; float:left;}
.nxt-col-7 {width: 58.33%; float:left;}
.nxt-col-8 {width: 66.66%; float:left;}
.nxt-col-9 {width: 75%; float:left;}
.nxt-col-10 {width: 83.33%; float:left;}
.nxt-col-11 {width: 91.66%; float:left;}
.nxt-col-12 {width: 100%; float:left;}
```
Rows first, then columns
Above the most narrow screen widths, the grid expands to include multiple columns. When multiple columns are available for layout and we can choose between using rows and columns to group content, we use rows first, and then columns. Pages should consist of clear horizontal sections that roughly correspond to the semantic structure of the page.
We follow this rule because the most common user experience at larger screen widths includes vertical scrolling on a landscape-oriented screen. To best support this, a group of elements that spans multiple columns should be wider than it is tall, guiding a user to see them as a unified “block” and enabling them to finish reading one column and continue to the next without scrolling upward. For grids of elements, this principle applies to each row of the grid.
Grouping content in this horizontal-centric way also makes it easier to include strong differentiating whitespace between page sections in a way that is consistent across all screen sizes (i.e. vertically, unconstrained by screen width).
Spacing
As with text, spacing between other elements and page sections should be based on the underlying baseline grid created by the line height used for standard copy.
The variables for these multiples of the base font size are (rem):
```
$spacing-x-small: 0.5rem;
$spacing-small: 1rem;
$spacing-md-small: 1.5rem;
$spacing-medium: 2rem;
$spacing-large: 3rem;
```
Use the provided spacing variables as often as possible. When these values don’t quite work, multiply or divide them by multiples of 0.5 (e.g. 4, 4.5, 6, etc.) to create other spacing values.
If existing spacing variables won't work, multiply or divide them by multiples of 0.5 to match the baseline grid.
```
/* GOOD */
margin-top: $spacing-x-small / 2;
margin-bottom: $spacing-large * 4.5;
```
```
/* BAD */
margin-top: $spacing-x-small / 1.15;
margin-bottom: 450px;
```
To Contribute
If you are interested in contributing, please visit: https://usnavy.github.io/Navy-Design-Guide/
We need you!