In CSS Grid, gap property (also known as gutters property) are used to add space between grid tracks and provide whitespace between elements placed within the grid. Defining gaps on the grid container allows you to separate items without needing to apply complex padding or margin definitions to each individual grid item. Gaps between rows don’t necessarily have to be the same size as gaps between columns.
CSS Grid provides specific properties for controlling these gaps:
row-gap
- This property governs the space between all rows in the grid.
- It is defined on the grid container element.
- It accepts a valid sizing value, such as px, rem, em, or %.
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr;
background-color: #2196F3;
padding: 10px;
gap:20px 20px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<section class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
<div class="item item6">Item 6</div>
<div class="item item7">Item 7</div>
<div class="item item8">Item 8</div>
<div class="item item9">Item 9</div>
<div class="item item10">Item 10</div>
<div class="item item11">Item 11</div>
<div class="item item12">Item 12</div>
</section>
</body>
</html>The above code, when applied to a grid container, would add a 16-pixel vertical space between each grid row.
column-gap
- This property governs the space between all columns in the grid.
- Like row-gap, it is defined on the grid container element.
- It also accepts any valid sizing value.
Example Code:
.container {
display: grid;
/* ... other grid properties ... */
row-gap: 16px; /* Explained above */
column-gap: 4px; /* Adds 4px space between columns */
}The above example shows adding a 4-pixel horizontal space between each grid column.
gap (Shorthand Property)
- The gap property is a shortcut for setting both row-gap and column-gap simultaneously.
- It also applies to the grid container.
- It can accept one or two values:
- If you provide a single value, it applies that size to both the row gap and the column gap.
- If two values are provided, the first value sets the row-gap, and the second value sets the column-gap.
Example Code:
.grid {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer"
;
/* Equivalent to row-gap: 15px; and column-gap: 30px; */
gap: 15px 30px;
}In the above example, the gap: 15px 30px; declaration sets a 15-pixel gap between rows and a 30-pixel gap between columns. If the values were the same, like gap: 20px;, it would set a 20-pixel gap for both rows and columns. Another example shows using gap: 5px; for both.
It is recommended to use non-relative units for gaps to help avoid unexpected behavior in element sizing. Note that row-gap and column-gap only affect the space between rows and columns, not the space around the outside of the grid container itself.
the gap property was initially called grid-gap. While gap is the current standard, using grid-gap may offer wider browser support.
gap properties are a concise way to add spacing within your grid structure, offering a cleaner alternative to managing margins and padding on individual items.
CSS3 Topics