‘gap’, ‘row-gap’, and ‘column-gap’ properties in CSS are used to control the spacing between items in a layout, particularly within CSS Grid and Flexbox containers.
1. gap property
The gap property defines the space between rows and columns in a CSS Grid or Flexbox container.
Syntax
gap: <row-gap> <column-gap>;
If you specify only one value, it applies to both rows and columns.
If you specify two values, the first value applies to rows, and the second value applies to columns.
Example 1
.container {
display: grid;
gap: 10px; /* Same gap for rows and columns */
}
Example 2
.container {
display: grid;
gap: 10px 20px; /* 10px gap between rows, 20px between columns */
}
2. row-gap
The row-gap property sets the spacing between rows in a grid or flex container.
Syntax
row-gap: <length>;
You can use any valid CSS length unit (e.g., px, em, rem).
.container {
display: grid;
row-gap: 15px; /* 15px gap between rows */
}
3. column-gap
The column-gap property sets the spacing between columns in a grid or flex container.
Syntax
column-gap: <length>;
Similar to row-gap, you can use various length units.
Example
.container {
display: grid;
column-gap: 20px; /* 20px gap between columns */
}
gap-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gap Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px 20px; /* 10px between rows, 20px between columns */
margin: 10px;
width: 95vw;
}
.grid-item {
background: deepskyblue;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
No comments:
Post a Comment