scss/web-design-standards/_scss/core/_grid.scss
.usa-grid,
.usa-grid-full {
@include outer-container();
max-width: $site-max-width;
@include media($medium) {
.usa-width-one-whole {
@include span-columns(6);
}
.usa-width-one-half {
@include span-columns(3);
}
.usa-width-one-third {
@include span-columns(2);
}
.usa-width-two-thirds {
@include span-columns(4);
}
.usa-width-one-fourth {
@include span-columns(3);
&:nth-child(2n) {
margin-right: 0;
}
}
.usa-width-three-fourths {
@include span-columns(6);
}
.usa-width-one-sixth {
@include span-columns(2);
&:nth-child(3n) {
margin-right: 0;
}
}
.usa-width-five-sixths {
@include span-columns(5);
}
.usa-width-one-twelfth {
@include span-columns(2);
&:nth-child(3n) {
margin-right: 0;
}
}
}
@include media($large) {
.usa-width-one-whole {
@include span-columns(12);
}
.usa-width-one-half {
@include span-columns(6);
}
.usa-width-one-third {
@include span-columns(4);
}
.usa-width-two-thirds {
@include span-columns(8);
}
.usa-width-one-fourth {
@include span-columns(3);
&:nth-child(2n) {
@include span-columns(3);
}
&:nth-child(4n) {
margin-right: 0;
}
}
.usa-width-three-fourths {
@include span-columns(9);
}
.usa-width-one-sixth {
@include span-columns(2);
&:nth-child(3n) {
@include span-columns(2);
}
&:nth-child(6n) {
margin-right: 0;
}
}
.usa-width-five-sixths {
@include span-columns(10);
}
.usa-width-one-twelfth {
@include span-columns(1);
&:nth-child(3n) {
@include span-columns(1);
}
&:nth-child(12n) {
margin-right: 0;
}
}
}
// Specificies end of a row.
// Required if grid-box contains multiple rows.
// Required if browser does not support :last-child
.usa-end-row {
@include omega();
}
}
.usa-grid {
padding: 0 $grid-margins;
}
.usa-grid-full {
padding: 0;
}