How to Use the CSS gap Property-CSS Tutorial-php.cn

CSS gap Attributes: Easily control element spacing

How to Use the CSS gap Property

Core points

CSS gap Properties allow developers to easily control the horizontal and vertical spacing between elements, solving many layout problems and simplifying margin management. It is compatible with grid layouts, Flexbox layouts, and multi-column layouts.
gap property can accept two values: row spacing and column spacing. When only one value is specified, the value is applied to both the row and the column. The spacing value can be any unit of length, percentage, or even a value calculated using the calc() function.
gap Properties are suitable for CSS grids, Flexbox, and multi-column layouts. It works seamlessly in a responsive layout, with the spacing direction automatically adjusting according to the box arrangement. You can also use to set the spacing of text elements by setting the text container to display: grid and adding the gap value.
While the gap property of a grid layout was originally called grid-gap, it is best to stick to gap because it is now suitable for grid, Flexbox, and multi-column layouts. However, in some cases, alignment properties such as justify-content and align-content can cause items to be spaced beyond the gap value. Also note that gap does not accept negative values.

This article will explore in-depth the usage of CSS gap attributes, which can easily add element spacing and solve many layout problems that have plagued developers for many years.

gap Use of attributes

The

gap attribute allows us to add horizontal and vertical spacing between elements. Of course, we can always use margin to achieve this. However, using margin to set project spacing can be cumbersome—especially when project wraps—because the last project will always have extra margins.

The following image shows four divs that use left and right and bottom margins to set the spacing:

article > div {
  margin: 0 10px 10px 0;
}

Copy after login

Please check the example on CodePen: The CSS gap Property: using margin instead of gap

Notice that the background of the container is highlighted on the right and bottom?

gap attributes only add spacing between items , which makes layout very easy. The following is the same layout as above, but this time use instead of : gap marginPlease check the example on CodePen:

The CSS gap Property: spacing items with gap shorthand

article {
  display: grid;
  gap: 10px;
}

Copy after login

Now we won't have ugly extra spacing on the right and bottom. The spacing is now only between projects, and the projects are closely arranged within the container.

We can use

with three different layout modes: grid, Flexbox, and multi-columns. We will introduce each mode in sequence below.

Guide to using gap Properties

Using gap is as easy as writing gap: 10px. (We saw the result of doing this in the demo above.) But let's see what this means.

gap The attribute can accept two values: row spacing (i.e. the spacing between element rows) and column spacing (i.e. the spacing between element columns): gap: <row-gap> <column-gap>.

How to Use the CSS gap Property

If we specify only one value, it will be applied to all rows and columns.

We can also use the row-gap and column-gap properties to specify column spacing or row spacing respectively.

The value of

gap can be any unit of length (such as px, em, vw), percentage units, or even values calculated using the calc() function.

How to use gap Properties

in CSS Grid

We see an example above using gap with grid layout. Let's try another example using different units:

article > div {
  margin: 0 10px 10px 0;
}

Copy after login

Please check the example on CodePen: The CSS gap Property: using gap with Grid longhand

This time, we used different units for rows and columns.

An added benefit of

gap is that it works seamlessly in a responsive layout. If we set spacing between two items, that spacing will apply regardless of whether the items are arranged side by side or up or down, as shown in the example below.

Please check the example on CodePen: Untitled

Press the 0.5x button at the bottom of the CodePen above, or open CodePen in your browser and widen and narrow the viewport to see how the spacing direction is adjusted according to the arrangement of the box. We benefit here from a single value on the gap property, which can be applied to rows and columns. If we don't want line spacing on smaller screens, we can set column-gap: 10px instead. Please try this in the CodePen above.

For more information on how to use grid layout, check out our CSS grid layout guide.

How to use gap Properties

in Flexbox

When Flexbox first appeared, it didn't have a gap attribute, so we had to turn to the ancient and painful way to use margin. Thankfully, using gap in modern browsers is now mainstream and well supported.

We can use it like we do in a grid:

article {
  display: grid;
  gap: 10px;
}

Copy after login

Please check the example on CodePen: The CSS gap Property: using gap with Flexbox

In the case of our Flex project responsive line breaks, the gap settings will be readjusted as needed and will not usually align in both vertical and horizontal directions, as shown in the example below.

Please check the example on CodePen: The CSS gap Property: using gap with a responsive Flexbox layout

If we want the spacing to align horizontally and vertically, it is best to use a grid.

Like grids, if we just want to set the spacing between column or rows, we can use column-gap and row-gap respectively.

How to use gap Properties

in Multi-Column Layout

Multi-column layout organizes the content into columns, but by default, these columns will have a 1em spacing set by the browser. We can use the gap property to set our preferred spacing width:

article > div {
  margin: 0 10px 10px 0;
}

Copy after login

Please check the example on CodePen: The CSS gap Property: using gap in a multi-column layout

(Try to remove the gap attribute from the CodePen above to see what happens.)

Because we only process columns here, we only apply the column spacing value, because there are no rows that can apply this value.

For fun, we also add a vertical line between these columns:

article {
  display: grid;
  gap: 10px;
}

Copy after login

Please check the example on CodePen: The CSS gap Property: using gap and column-rule in multi-column layout

Please note that column-rule is the abbreviation for column-rule-width, column-rule-style and column-rule-color.

About gap Useful information about the attributes

The

attribute of the gap grid layout is originally called grid-gap, and its full form is grid-row-gap and grid-column-gap. While these properties are still valid, it is best to stick with gap as it is now suitable for grid, Flexbox, and multi-column layouts.

The multi-column layout has an older column-gap property, which is still valid as well. But again, it is easier to remember gap in all cases.

The spacing can be set as a percentage value, but the percentage is relative to what percentage? It actually depends on many factors and can be difficult to predict. You can explore this further in the specification. As a general rule, it is best to avoid using percentages in gap unless you really know what you are doing.

Alignment properties such as

justify-content and align-content can also separate elements in grid and Flexbox layouts, and in some cases they will cause items to be spaced beyond the gap value. However, the gap value is still useful because it provides a minimum spacing between elements on a smaller screen.

Why not use `gap` to set the spacing of all elements?

As mentioned above, gap solves some annoying issues related to margin spacing. These margin issues may also affect text and other content. For example, if we use the bottom margin to set the spacing of text elements (such as paragraphs and titles), then there will be extra margins after the last element, or if we use the top margin, the first element may appear Extra top margin. There are some easy ways to solve this problem in CSS, but it's still a cumbersome, and some developers decided to use gap instead.

To use gap to set the spacing of text elements, we simply set the text container to display: grid and add the gap value:

article > div {
  margin: 0 10px 10px 0;
}

Copy after login

The

<code><p></p>, <h1></h1>, <h2></h2> and <hr> elements are now grid items. Please check the example on CodePen: The CSS gap Property: spacing text content with gap

But should we do this? One drawback is that all elements are spaced the same, and changing the spacing between elements, especially around the title, may be visually more attractive. However, it is still an interesting idea to use gap for this. To explore this further, check out Kevin Powell’s very interesting video about setting text spacing using gap.

Summary

gap Properties are a convenient tool for setting project spacing when using grid, Flexbox, and multi-column layouts. It allows us to no longer have to use the old messy margin method. It can be used in a creative way in design, but don't overuse it!

What is CSS `gap` Properties?

CSS gap attributes are abbreviated attributes for row-gap and column-gap. It specifies the spacing size between rows and columns in a grid, Flex, or multi-column layout. This property is especially useful in creating visually attractive and well-structured CSS layouts. It helps maintain consistent spacing and alignment in design elements.

CSS `gap` How do attributes work?

CSS gap Properties work by setting the spacing (space) size between rows and columns. The first value you provide will set the row spacing and the second value will set the column spacing. If you provide only one value, it will set both row and column spacing to that value. For example, gap: 10px 20px sets the row spacing to 10px and the column spacing to 20px.

Can I use the CSS `gap` attribute in Flexbox?

Yes, you can use the CSS gap attribute in Flexbox. It allows you to create spacing between Flex projects. However, please note that this feature may not be supported in all browsers, especially in older browsers. Always check browser compatibility before using it.

What is the difference between

and `gap` in `grid-gap`?

The

grid-gap attribute is abbreviated attribute for grid-row-gap and grid-column-gap, dedicated to grid layout. However, CSS grid layout module level 2 has replaced grid-gap with gap. Now, gap can be used for grid, Flex, and multi-column layouts.

How to use CSS `gap` properties in responsive design?

You can use it in responsive design by setting the CSS gap attribute using relative units such as percentages or viewport units. This way, the spacing size will be adjusted to the size of the viewport or parent element, making your layout responsive.

Can I use negative values in the CSS `gap` attribute?

No, you cannot use negative values in the CSS gap attribute. gap Attribute only accepts non-negative values. If you try to use a negative value, it will be ignored and the default value will be used.

CSS `gap` What is the default value of the attribute?

The default value of the

CSS gap attribute is normal, which means that the browser will determine the size of the spacing. However, you can override this default value by specifying the desired spacing size.

Can I use the CSS `gap` attribute in a multi-column layout?

Yes, you can use the CSS gap attribute in a multi-column layout. It allows you to set the spacing between columns in a multi-column layout.

CSS `gap` Are attributes inherited?

No, CSS gap attributes will not be inherited. This means that the spacing size specified for the parent element is not applied to its child elements.

What units can I use in the CSS `gap` attribute?

You can use multiple units in the CSS gap attribute, including pixels (px), em (em), rem (rem), percentages (%), and viewport units (vw, vh). Each unit has its own use cases that can be used according to your specific needs.

Please note that all CodePen links are placeholders and need to be replaced with the actual available links.

The above is the detailed content of How to Use the CSS gap Property. For more information, please follow other related articles on the PHP Chinese website!