CSS gap is NOT a replacement for margins

The Problem with Overusing Gap in CSS

In this video, the speaker discusses the trend of overusing gap in CSS and why it may not be the best approach. They explore how to bring back spacing using margins and how to use typography principles to create visual hierarchy.

Abandoning Margins for Gap

• Many people are abandoning margins and using gap for everything.

• This can be problematic because Gap is consistent and doesn't allow for typographic variation.

• Using margin block start with M instead of REM can help create visual hierarchy based on font size.

Advantages of Using Gap

• Using Gap has some advantages, such as not having to deal with adding margins to elements at the top or bottom of a page.

• If you do decide to use Gap, it's better to use grid than flexbox.

Bringing Back Spacing with Margins

• To bring back spacing using margins, select all children of an element and add margin block start with M instead of REM.

• This allows for typographic variation and creates visual hierarchy based on font size.

Conclusion

The speaker suggests that while using Gap can have its advantages, it's important not to abandon margins completely. By bringing back spacing using margins and following typography principles, we can create more visually appealing designs that are easier to scan through quickly.

Gap and Grid

In this section, the speaker discusses the use of gap and grid in CSS layouts.

Using Gap for Spacing

• Gap is a useful tool for creating equal spacing between components.

• It works well vertically when content is shifting around.

• Margins can be annoying to use in situations where spacing left and right is needed.

• Use gap in situations where you need spacing between components, such as cards or layouts with different items.

Using Grid with Gap

• Display grid can be used with gap to create equal spacing between items.

• However, using gap can cause issues with stretching elements, such as buttons.

• If you want to adjust the alignment of items within a grid layout, use justify-items and align-items instead of justify-content and align-content.

Alternatives to Gap

• Instead of using gap, you could target specific elements and add margin-top to achieve consistent spacing.

• The "lobotomized owl" technique can also be used to select all children except the first one and apply margin-top to them.

Form Layout with Grid and Gap

In this section, the speaker discusses how to use grid and gap for form layout.

Using Grid and Gap for Form Layout

• Use form-group class to group label and input together.

• Use display: grid property to create spacing between form groups.

• Add a gap of desired size using gap property.

• Use larger spacing between larger items such as subtitles, titles, etc.

• Flexbox also works well for form layout.

Margins vs Gap

In this section, the speaker compares margins and gap for creating spacing in web design.

When to Use Margins or Gap

• Use margin when consistent spacing is not required.

• Larger spacing is better for flow content such as subtitles, titles, etc.

• Gap requires more setup but can be useful when consistent spacing is needed.

Flexbox vs Gap

In this section, the speaker compares flexbox and gap for creating layouts in web design.

When to Use Flexbox or Gap

• Use flexbox when dealing with complex layouts that require flexibility.

• Use gap when consistent spacing is needed between elements.