fix(Docs): rename grid mode(s) to gutter mode(s) (carbon-design-syste…

…m#3604)

* fix(Docs): rename grid mode(s) to gutter mode(s)

* fix(Docs): typo

* chore: remove file

---------

Co-authored-by: Alison Joseph <[email protected]>

src/pages/components/button/usage.mdx

@@ -408,9 +408,9 @@ or ghost buttons in layouts with more than three calls to action.
 Ideally, when using groups of related buttons (not including ghost buttons),
 they should all be the same width. This can be achieved in one of two ways, both
 of which are acceptable. The first approach involves using the
-[narrow grid mode](/guidelines/2x-grid/implementation#grid-modes). In this
+[narrow gutter mode](/guidelines/2x-grid/implementation#gutter-modes). In this
 situation each button would be set individually on the column grid. _Note:
-Carbon developers are working on the narrow grid mode, currently left-hanging
+Carbon developers are working on the narrow gutter mode, currently left-hanging
 buttons can only be achieved with an override._
 
 <Row>

src/pages/components/data-table/usage.mdx

@@ -209,18 +209,18 @@ modals or smaller containers where the information can feel cramped or needs
 truncation.
 
 The data table can be placed on the grid following the three different
-[grid modes](/guidelines/2x-grid/implementation#grid-modes) outlined in the 2x
-grid guidelines. Although, the data table can share horizontal space with other
-components and content, consider giving your data table the most width on the
-page to help your user view dense data.
+[gutter modes](/guidelines/2x-grid/implementation#gutter-modes) outlined in the
+2x grid guidelines. Although, the data table can share horizontal space with
+other components and content, consider giving your data table the most width on
+the page to help your user view dense data.
 
 These three examples show the data table on the wide (default), narrow, and
-condensed grid modes. Note the different type alignments and gutter sizes.
+condensed gutter modes. Note the different type alignments and gutter sizes.
 
-#### Wide grid mode
+#### Wide gutter mode
 
-The wide grid mode is the default and gives the most breathing room between the
-data table and the other components or content.
+The wide gutter mode is the default and gives the most breathing room between
+the data table and the other components or content.
 
 <Row>
 <Column colLg={12}>
@@ -232,7 +232,7 @@ data table and the other components or content.
 </Column>
 </Row>
 
-#### Narrow grid mode
+#### Narrow gutter mode
 
 Using the data table on a narrow grid will hang the component into the gutter
 and create a desirable type alignment between the the data table's title and
@@ -248,7 +248,7 @@ other type on the page.
 </Column>
 </Row>
 
-#### Condensed grid mode
+#### Condensed gutter mode
 
 The data table can be used on a condensed grid, but care should be taken to
 avoid any unintentional relationships with other UI elements. Use a hybrid grid

src/pages/components/form/usage.mdx

@@ -110,15 +110,15 @@ functionality but look visually different and have different alignment rules.
 
 In a form, input components should vertically align with all other form
 components. Whether a form aligns flush to grid columns or hangs in the gutters
-depends on the style of form input you are using as well as the grid mode.
-Default forms typically use a wide grid mode and align flush to the grid columns
-prioritizing vertical label alignment. Fluid forms use the condensed grid and
-can hang into the gutter without causing label misalignment. Fluid forms are
-architectural and remain cohesive by never allowing vertical or horizontal space
-between inputs.
+depends on the style of form input you are using as well as the gutter mode.
+Default forms typically use a wide gutter mode and align flush to the grid
+columns prioritizing vertical label alignment. Fluid forms use the condensed
+grid and can hang into the gutter without causing label misalignment. Fluid
+forms are architectural and remain cohesive by never allowing vertical or
+horizontal space between inputs.
 
 <DoDontRow>
-  <DoDont type="do" caption="Do align default form inputs and labels to the grid columns using the wide grid mode.">
+  <DoDont type="do" caption="Do align default form inputs and labels to the grid columns using the wide gutter mode.">
 
 ![An example showing a properly aligned default inputs](images/form-usage-3-do.png)
 
@@ -131,7 +131,7 @@ between inputs.
 </DoDontRow>
 
 <DoDontRow>
-  <DoDont type="do" caption="Do stack fluid components flush to one another with no spacing between them using the condensed grid mode.">
+  <DoDont type="do" caption="Do stack fluid components flush to one another with no spacing between them using the condensed gutter mode.">
 
 ![An example showing a properly stacked fluid inputs](images/form-usage-4-do.png)
 
@@ -147,10 +147,10 @@ between inputs.
 
 If a form has more than one column, then the columns should be proportional and
 align to grid columns when possible. The space between form columns is
-determined by the grid mode you are using; default forms use the wide grid mode
-with 32px padding between form columns, versus fluid forms use the condensed
-grid mode with 1px padding. The narrow grid mode (16px) is typically not used in
-forms as it often places the text in the gutter.
+determined by the gutter mode you are using; default forms use the wide gutter
+mode with 32px padding between form columns, versus fluid forms use the
+condensed gutter mode with 1px padding. The narrow gutter mode (16px) is
+typically not used in forms as it often places the text in the gutter.
 
 <Row>
 <Column colLg={8}>

src/pages/components/tile/usage.mdx

@@ -266,7 +266,7 @@ they are given their own click targets.
 
 ### Sizing
 
-The **width** varies depending on three basic grid modes: wide, narrow, and
+The **width** varies depending on three basic gutter modes: wide, narrow, and
 condensed. Tile **height** varies depending on the amount of content placed
 within it, but applies the
 [spacing](https://carbondesignsystem.com/guidelines/spacing/overview/) and

src/pages/patterns/fluid-styles/index.mdx

@@ -47,7 +47,7 @@ resizes.
 
 <Caption>
   A fluid text input and fluid buttons inside a fluid modal container using the
-  condensed grid mode.
+  condensed gutter mode.
 </Caption>
 
 ### Key terms
@@ -164,10 +164,10 @@ see [2x Grid](/guidelines/2x-grid/overview/).
 ### Fluid forms
 
 Fluid forms are architectural in that they do not allow vertical or horizontal
-space between inputs. Fluid forms use the condensed or narrow grid mode and can
-hang into the gutter without causing label misalignment. Default forms use a
-wide grid mode and align, flush to the grid columns, prioritizing vertical label
-alignment on the grid.
+space between inputs. Fluid forms use the condensed or narrow gutter mode and
+can hang into the gutter without causing label misalignment. Default forms use a
+wide gutter mode and align, flush to the grid columns, prioritizing vertical
+label alignment on the grid.
 
 Fluid forms should only be used for simple, straightforward tasks, and any
 complex or multi-section forms should use the default style instead. For more
@@ -196,8 +196,8 @@ guidance on default versus fluid forms, see the
 - Fluid components are stacked flush to one another with 0px of padding between
   them.
 - Default components are equally stacked with padding separating each component.
-- Fluid components use the condensed or narrow grid modes while default variants
-  use the wide or narrow grid mode.
+- Fluid components use the condensed or narrow gutter modes while default
+  variants use the wide or narrow gutter mode.
 
 <DoDontRow>
   <DoDont type="do" caption="Do stack fluid components flush to one another as they are architectural and should remain a cohesive unit.">