// Grid container .usa-grid, .usa-grid-full {
@include outer-container($site-max-width);
}
.usa-grid {
@include padding(null $site-margins-mobile); @include media($medium-screen) { @include padding(null $site-margins); }
}
.usa-grid-full {
padding: 0;
}
// Grid items @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(4); } .usa-width-one-twelfth { @include span-columns(2); &:nth-child(3n) { margin-right: 0; } } .usa-width-five-twelfths { @include span-columns(2); } .usa-width-seven-twelfths { @include span-columns(4); }
}
@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; } } .usa-width-five-twelfths { @include span-columns(5); } .usa-width-seven-twelfths { @include span-columns(7); }
}
// Specifies end of a row. // Required if grid-box contains multiple rows. // Required if browser does not support :last-child .usa-end-row {
@include omega();
}
// Grid Offsets .usa-offset-one-twelfth {
@include shift(1 of 12);
}
.usa-offset-one-sixth {
@include shift(2 of 12);
}
.usa-offset-one-fourth {
@include shift(3 of 12);
}
.usa-offset-one-third {
@include shift(4 of 12);
}
.usa-offset-five-twelfths {
@include shift(5 of 12);
}
.usa-offset-one-half {
@include shift(6 of 12);
}
.usa-offset-seven-twelfths {
@include shift(7 of 12);
}
.usa-offset-two-thirds {
@include shift(8 of 12);
}
.usa-offset-three-fourths {
@include shift(9 of 12);
}
.usa-offset-five-sixths {
@include shift(10 of 12);
}
.usa-offset-eleven-twelfths {
@include shift(11 of 12);
}