Skip to content

Commit

Permalink
feat: improvments on gutters (#33751)
Browse files Browse the repository at this point in the history
* feat: improvments on gutters

* Update files/en-us/glossary/gutters/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Chris Mills <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
3 people committed May 27, 2024
1 parent 22a06e2 commit c777679
Showing 1 changed file with 8 additions and 10 deletions.
18 changes: 8 additions & 10 deletions files/en-us/glossary/gutters/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ page-type: glossary-definition

{{GlossarySidebar}}

**Gutters** or _alleys_ are spacing between content tracks. These can be created in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties.
**Gutters** or _alleys_ are spacing between content {{glossary("grid_tracks", "tracks")}}. These can be created in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout) using the {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, or {{cssxref("gap")}} properties.

## Example

In the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and `20px`-gaps between row tracks.
In the example below we have a three-column and two-row track grid, with `20px` gaps between both column tracks and row tracks.

```css hidden
* {
Expand Down Expand Up @@ -60,13 +60,11 @@ The `row-gap` and `column-gap` properties are not the only things that can cause

## See also

### Property reference
- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)
- Property reference

- {{cssxref("column-gap")}}
- {{cssxref("row-gap")}}
- {{cssxref("gap")}}
- {{cssxref("column-gap")}}
- {{cssxref("row-gap")}}
- {{cssxref("gap")}}

### Further reading

- CSS Grid Layout Guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_
- [Definition of gutters in the CSS Grid Layout specification](https://drafts.csswg.org/css-grid/#gutters)
- [Definition of gutters](https://drafts.csswg.org/css-grid/#gutters) in the CSS Grid Layout specification

0 comments on commit c777679

Please sign in to comment.