Skip to content

Column Gap

Controls the spacing between columns in a grid layout.

Class Properties

cg-1

column-gap: 0.25rem;

cg-2

column-gap: 0.5rem;

cg-3

column-gap: 0.75rem;

cg-4

column-gap: 1rem;

cg-5

column-gap: 1.25rem;

cg-6

column-gap: 1.5rem;

cg-7

column-gap: 1.75rem;

cg-8

column-gap: 2rem;

cg-9

column-gap: 2.25rem;

cg-10

column-gap: 2.5rem;

cg-11

column-gap: 2.75rem;

cg-12

column-gap: 3rem;

cg-13

column-gap: 3.25rem;

cg-14

column-gap: 3.5rem;

cg-15

column-gap: 3.75rem;

cg-16

column-gap: 4rem;

Using breakpoints

Using responsive breakpoints like sm:cg-*, md:cg-*, lg:cg-*, and xxl:cg-* allows targeting specific utilities in different viewports.

<div class="cg-1 md:cg-2 ..."></div>

Using variants

Using :hover variants such as h:cg-* allows you to override elements and change their values when hovering over them.

<div class="cg-1 h:cg-2 ..."></div>