diff --git a/scss/_config.scss b/scss/_config.scss index be0b7c9297..f20bf12425 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -50,7 +50,7 @@ $breakpoints: ( // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; -$grid-gutter-width: 1.5rem !default; +$grid-gutter-width: 1.25rem !default; $grid-row-columns: 6 !default; // Grid containers diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 89a5e1ff5a..57ecf42622 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -69,11 +69,14 @@ } // mdo-do: add to utilities? - .g-col-auto { + .col-auto { grid-column: auto/auto; } // mdo-do: add to utilities? + .grid-cols-2 { + --#{$prefix}columns: 2; + } .grid-cols-3 { --#{$prefix}columns: 3; } diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx index 04d3bd5a8b..e70c2e039e 100644 --- a/site/src/content/docs/forms/layout.mdx +++ b/site/src/content/docs/forms/layout.mdx @@ -30,36 +30,70 @@ Feel free to build your forms however you like, with `
`s, `
`s, or ## Form grid -More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). +More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. - -
- -
-
- -
-
`} /> + +
+ +
+
+ +
+`} /> ## Gutters -By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default). +By adding [gutter modifier classes]([[docsref:/layout/gutters]]), you can have control over the gutter width in as well the inline as block direction. - -
- -
-
- -
- `} /> + +
+ +
+
+ +
+`} /> More complex layouts can also be created with the grid system. - -
- - + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
@@ -108,16 +142,48 @@ Create horizontal forms with the grid by adding the `.row` class to form groups At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline. -
- -
- +
+ +
+ +
+
+
+ +
+ +
+
+
+ Radios +
+
+ + +
+
+ + +
+
+ +
-
- -
- +
+
+
+
+ +
@@ -160,49 +226,55 @@ At times, you maybe need to use margin or padding utilities to create that perfe Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `
`} /> + +
+ +
+
+ +
+
+ +
+
`} /> ## Auto-sizing The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents. - -
- - + +
+ + +
+
+ +
+
@
+
@@ -235,10 +307,16 @@ The example below uses a flexbox utility to vertically center the contents and c You can then remix that once again with size-specific column classes. - -
- - + +
+ + +
+
+ +
+
@
+