gap

The gap CSS property is shorthand for row-gap and column-gap.

Syntax

CSS

gap: value;

JS

object.style.gap = "value";

Values

<'gap'> = <'row-gap'> <'column-gap'>?

<'row-gap'> = normal | <length-percentage>

normal

Represents a value of 1em on multi-column containers and 0px in all other contexts.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<'column-gap'> = normal | <length-percentage>

normal

Represents a value of 1em on multi-column containers and 0px in all other contexts.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

Initial

normal

Examples

1 · length

2 · normal

3 · percentage

4 · JS · Inline

5 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        .myclass > div
        {
            border-style: solid;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="40px 20px">length</button>
    <button>normal</button>
    <button value="40% 20%">percentage</button>
    <div class="myclass">
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
        <div>gap</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".myclass").style.gap = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

Links

Properties

animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-play-state

animation-timeline

animation-timing-function

backdrop-filter

backface-visibility

background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-size

border-block-color

border-block-end

border-block-end-color

border-block-end-style

border-block-end-width

border-block-start

border-block-start-color

border-block-start-style

border-block-start-width

border-block-style

border-block-width

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-end-end-radius

border-end-start-radius

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-inline-color

border-inline-end

border-inline-end-color

border-inline-end-style

border-inline-end-width

border-inline-start

border-inline-start-color

border-inline-start-style

border-inline-start-width

border-inline-style

border-inline-width

border-left-color

border-left-style

border-left-width

border-right-color

border-right-style

border-right-width

border-start-end-radius

border-start-start-radius

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

box-decoration-break

column-rule-color

column-rule-style

column-rule-width

contain-intrinsic-block-size

contain-intrinsic-height

contain-intrinsic-inline-size

contain-intrinsic-size

contain-intrinsic-width

content-visibility

counter-increment

font-feature-settings

font-optical-sizing

font-size-adjust

font-variant-caps

font-variant-ligatures

font-variant-numeric

font-variant-position

font-variation-settings

forced-color-adjust

grid-auto-columns

grid-column-end

grid-column-start

grid-template-areas

grid-template-columns

grid-template-rows

hanging-punctuation

image-rendering

initial-letter-align

inset-block-end

inset-block-start

inset-inline-end

inset-inline-start

justify-content

list-style-image

list-style-position

list-style-type

margin-block-end

margin-block-start

margin-inline-end

margin-inline-start

mask-border-mode

mask-border-outset

mask-border-repeat

mask-border-slice

mask-border-source

mask-border-width

max-inline-size

min-inline-size

object-position

overflow-clip-margin

overflow-inline

padding-block-end

padding-block-start

padding-inline-end

padding-inline-start

perspective-origin

print-color-adjust

scroll-behavior

scroll-margin-block

scroll-margin-block-end

scroll-margin-block-start

scroll-margin-bottom

scroll-margin-inline

scroll-margin-inline-end

scroll-margin-inline-start

scroll-margin-left

scroll-margin-right

scroll-margin-top

scroll-padding-block

scroll-padding-block-end

scroll-padding-block-start

scroll-padding-bottom

scroll-padding-inline

scroll-padding-inline-end

scroll-padding-inline-start

scroll-padding-left

scroll-padding-right

scroll-padding-top

scroll-snap-align

scroll-snap-stop

scroll-snap-type

scroll-timeline

scroll-timeline-axis

scroll-timeline-name

scrollbar-color

scrollbar-gutter

scrollbar-width

shape-image-threshold

text-align-last

text-combine-upright

text-decoration

text-decoration-color

text-decoration-line

text-decoration-skip-ink

text-decoration-style

text-decoration-thickness

text-decoration-trim

text-emphasis-color

text-emphasis-position

text-emphasis-style

text-orientation

text-underline-offset

text-underline-position

transform-origin

transform-style

transition-delay

transition-duration

transition-property

transition-timing-function

External

World Wide Web Consortium (W3C)

Home