HTML Guide for gap

The gap property in CSS does not accept auto as a valid value.

The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.

Correct usage:

<div style="display: grid; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Incorrect usage (produces a validation error):

<div style="display: grid; gap: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.