butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0c8a1097fc
kb/data/developer.mozilla.org/en-US/docs/Glossary/Gutters-0.md

11 KiB
Raw Blame History

title chunk source category tags date_saved instance
Gutters - Glossary | MDN 1/3 https://developer.mozilla.org/en-US/docs/Glossary/Gutters reference web, html, css, javascript, documentation 2026-05-05T05:33:16.026900+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Glossary
  2. Gutters

Gutters

Gutters or alleys are spacing between content tracks. These can be created in CSS grid layout, flex layout, and multi-column layout using the column-gap, row-gap, or gap properties.

In this article

Example

In the example below we have a three-column and two-row track grid, with 20px gaps between both column tracks and row tracks. In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap. The row-gap and column-gap properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in CSS box alignment can all contribute to the visible gap – therefore the row-gap and column-gap properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods.

See also