Spacing is available in the seven steps: 20, 30, 40, 50, 60, 70, and 80. Below is the code used to define spacing presets in theme.json:
{
"settings": {
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{
"name": "20",
"size": "clamp(15px, 2vw, 20px)",
"slug": "20"
},
{
"name": "30",
"size": "clamp(25px, 3vw, 30px)",
"slug": "30"
},
{
"name": "40",
"size": "clamp(30px, 4vw, 40px)",
"slug": "40"
},
{
"name": "50",
"size": "clamp(35px, 5vw, 50px)",
"slug": "50"
},
{
"name": "60",
"size": "clamp(40px, 6vw, 60px)",
"slug": "60"
},
{
"name": "70",
"size": "clamp(50px, 7vw, 70px)",
"slug": "70"
},
{
"name": "80",
"size": "clamp(60px, 8vw, 80px)",
"slug": "80"
}
],
"units": [ "%", "px", "em", "rem", "vh", "vw" ]
}
}
}Fluid Spacing
Spacing in Powder is fluid, and each preset utilizes the clamp() CSS function to define three parameters : a minimum value, a preferred value, and a maximum value. Examples can be seen below:
Spacing 20
This is a sample group with fluid spacing.
Spacing 30
This is a sample group with fluid spacing.
Spacing 40
This is a sample group with fluid spacing.
Spacing 50
This is a sample group with fluid spacing.
Spacing 60
This is a sample group with fluid spacing.
Spacing 70
This is a sample group with fluid spacing.
Spacing 80
This is a sample group with fluid spacing.