baselinewidely| Class | CSS |
|---|---|
| cg:0 | column-gap: 0; |
| cg:1 | column-gap: .25rem; |
| cg:2 | column-gap: .5rem; |
| cg:3 | column-gap: .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; |
| cg:17 | column-gap: 4.25rem; |
| cg:18 | column-gap: 4.5rem; |
| cg:19 | column-gap: 4.75rem; |
| cg:20 | column-gap: 5rem; |
| cg:21 | column-gap: 5.25rem; |
| cg:22 | column-gap: 5.5rem; |
| cg:23 | column-gap: 5.75rem; |
| cg:24 | column-gap: 6rem; |
| cg:25 | column-gap: 6.25rem; |
| cg:26 | column-gap: 6.5rem; |
| cg:27 | column-gap: 6.75rem; |
| cg:28 | column-gap: 7rem; |
| cg:29 | column-gap: 7.25rem; |
| cg:30 | column-gap: 7.5rem; |
| cg:31 | column-gap: 7.75rem; |
| cg:32 | column-gap: 8rem; |
| cg:33 | column-gap: 8.25rem; |
| cg:34 | column-gap: 8.5rem; |
| cg:35 | column-gap: 8.75rem; |
| cg:36 | column-gap: 9rem; |
| cg:37 | column-gap: 9.25rem; |
| cg:38 | column-gap: 9.5rem; |
| cg:39 | column-gap: 9.75rem; |
| cg:40 | column-gap: 10rem; |
| cg:41 | column-gap: 10.25rem; |
| cg:42 | column-gap: 10.5rem; |
| cg:43 | column-gap: 10.75rem; |
| cg:44 | column-gap: 11rem; |
| cg:45 | column-gap: 11.25rem; |
| cg:46 | column-gap: 11.5rem; |
| cg:47 | column-gap: 11.75rem; |
| cg:48 | column-gap: 12rem; |
| cg:49 | column-gap: 12.25rem; |
| cg:50 | column-gap: 12.5rem; |
| cg:51 | column-gap: 12.75rem; |
| cg:52 | column-gap: 13rem; |
| cg:53 | column-gap: 13.25rem; |
| cg:54 | column-gap: 13.5rem; |
| cg:55 | column-gap: 13.75rem; |
| cg:56 | column-gap: 14rem; |
| cg:57 | column-gap: 14.25rem; |
| cg:58 | column-gap: 14.5rem; |
| cg:59 | column-gap: 14.75rem; |
| cg:60 | column-gap: 15rem; |
| cg:61 | column-gap: 15.25rem; |
| cg:62 | column-gap: 15.5rem; |
| cg:63 | column-gap: 15.75rem; |
| cg:64 | column-gap: 16rem; |
| cg:65 | column-gap: 16.25rem; |
| cg:66 | column-gap: 16.5rem; |
| cg:67 | column-gap: 16.75rem; |
| cg:68 | column-gap: 17rem; |
| cg:69 | column-gap: 17.25rem; |
| cg:70 | column-gap: 17.5rem; |
| cg:71 | column-gap: 17.75rem; |
| cg:72 | column-gap: 18rem; |
| cg:73 | column-gap: 18.25rem; |
| cg:74 | column-gap: 18.5rem; |
| cg:75 | column-gap: 18.75rem; |
| cg:76 | column-gap: 19rem; |
| cg:77 | column-gap: 19.25rem; |
| cg:78 | column-gap: 19.5rem; |
| cg:79 | column-gap: 19.75rem; |
| cg:80 | column-gap: 20rem; |
| cg:81 | column-gap: 20.25rem; |
| cg:82 | column-gap: 20.5rem; |
| cg:83 | column-gap: 20.75rem; |
| cg:84 | column-gap: 21rem; |
| cg:85 | column-gap: 21.25rem; |
| cg:86 | column-gap: 21.5rem; |
| cg:87 | column-gap: 21.75rem; |
| cg:88 | column-gap: 22rem; |
| cg:89 | column-gap: 22.25rem; |
| cg:90 | column-gap: 22.5rem; |
| cg:91 | column-gap: 22.75rem; |
| cg:92 | column-gap: 23rem; |
| cg:93 | column-gap: 23.25rem; |
| cg:94 | column-gap: 23.5rem; |
| cg:95 | column-gap: 23.75rem; |
| cg:96 | column-gap: 24rem; |
| cg:97 | column-gap: 24.25rem; |
| cg:98 | column-gap: 24.5rem; |
| cg:99 | column-gap: 24.75rem; |
| cg:100 | column-gap: 25rem; |
| cg:101 | column-gap: 25.25rem; |
| cg:102 | column-gap: 25.5rem; |
| cg:103 | column-gap: 25.75rem; |
| cg:104 | column-gap: 26rem; |
| cg:105 | column-gap: 26.25rem; |
| cg:106 | column-gap: 26.5rem; |
| cg:107 | column-gap: 26.75rem; |
| cg:108 | column-gap: 27rem; |
| cg:109 | column-gap: 27.25rem; |
| cg:110 | column-gap: 27.5rem; |
| cg:111 | column-gap: 27.75rem; |
| cg:112 | column-gap: 28rem; |
| cg:113 | column-gap: 28.25rem; |
| cg:114 | column-gap: 28.5rem; |
| cg:115 | column-gap: 28.75rem; |
| cg:116 | column-gap: 29rem; |
| cg:117 | column-gap: 29.25rem; |
| cg:118 | column-gap: 29.5rem; |
| cg:119 | column-gap: 29.75rem; |
| cg:120 | column-gap: 30rem; |
| cg:121 | column-gap: 30.25rem; |
| cg:122 | column-gap: 30.5rem; |
| cg:123 | column-gap: 30.75rem; |
| cg:124 | column-gap: 31rem; |
| cg:125 | column-gap: 31.25rem; |
| cg:126 | column-gap: 31.5rem; |
| cg:127 | column-gap: 31.75rem; |
| cg:128 | column-gap: 32rem; |
| cg:129 | column-gap: 32.25rem; |
| cg:130 | column-gap: 32.5rem; |
| cg:131 | column-gap: 32.75rem; |
| cg:132 | column-gap: 33rem; |
| cg:133 | column-gap: 33.25rem; |
| cg:134 | column-gap: 33.5rem; |
| cg:135 | column-gap: 33.75rem; |
| cg:136 | column-gap: 34rem; |
| cg:137 | column-gap: 34.25rem; |
| cg:138 | column-gap: 34.5rem; |
| cg:139 | column-gap: 34.75rem; |
| cg:140 | column-gap: 35rem; |
| cg:141 | column-gap: 35.25rem; |
| cg:142 | column-gap: 35.5rem; |
| cg:143 | column-gap: 35.75rem; |
| cg:144 | column-gap: 36rem; |
| cg:145 | column-gap: 36.25rem; |
| cg:146 | column-gap: 36.5rem; |
| cg:147 | column-gap: 36.75rem; |
| cg:148 | column-gap: 37rem; |
| cg:149 | column-gap: 37.25rem; |
| cg:150 | column-gap: 37.5rem; |
| cg:151 | column-gap: 37.75rem; |
| cg:152 | column-gap: 38rem; |
| cg:153 | column-gap: 38.25rem; |
| cg:154 | column-gap: 38.5rem; |
| cg:155 | column-gap: 38.75rem; |
| cg:156 | column-gap: 39rem; |
| cg:157 | column-gap: 39.25rem; |
| cg:158 | column-gap: 39.5rem; |
| cg:159 | column-gap: 39.75rem; |
| cg:160 | column-gap: 40rem; |
| cg:161 | column-gap: 40.25rem; |
| cg:162 | column-gap: 40.5rem; |
| cg:163 | column-gap: 40.75rem; |
| cg:164 | column-gap: 41rem; |
| cg:165 | column-gap: 41.25rem; |
| cg:166 | column-gap: 41.5rem; |
| cg:167 | column-gap: 41.75rem; |
| cg:168 | column-gap: 42rem; |
| cg:169 | column-gap: 42.25rem; |
| cg:170 | column-gap: 42.5rem; |
| cg:171 | column-gap: 42.75rem; |
| cg:172 | column-gap: 43rem; |
| cg:173 | column-gap: 43.25rem; |
| cg:174 | column-gap: 43.5rem; |
| cg:175 | column-gap: 43.75rem; |
| cg:176 | column-gap: 44rem; |
| cg:177 | column-gap: 44.25rem; |
| cg:178 | column-gap: 44.5rem; |
| cg:179 | column-gap: 44.75rem; |
| cg:180 | column-gap: 45rem; |
| cg:181 | column-gap: 45.25rem; |
| cg:182 | column-gap: 45.5rem; |
| cg:183 | column-gap: 45.75rem; |
| cg:184 | column-gap: 46rem; |
| cg:185 | column-gap: 46.25rem; |
| cg:186 | column-gap: 46.5rem; |
| cg:187 | column-gap: 46.75rem; |
| cg:188 | column-gap: 47rem; |
| cg:189 | column-gap: 47.25rem; |
| cg:190 | column-gap: 47.5rem; |
| cg:191 | column-gap: 47.75rem; |
| cg:192 | column-gap: 48rem; |
| cg:193 | column-gap: 48.25rem; |
| cg:194 | column-gap: 48.5rem; |
| cg:195 | column-gap: 48.75rem; |
| cg:196 | column-gap: 49rem; |
| cg:197 | column-gap: 49.25rem; |
| cg:198 | column-gap: 49.5rem; |
| cg:199 | column-gap: 49.75rem; |
| cg:200 | column-gap: 50rem; |
| cg:201 | column-gap: 50.25rem; |
| cg:202 | column-gap: 50.5rem; |
| cg:203 | column-gap: 50.75rem; |
| cg:204 | column-gap: 51rem; |
| cg:205 | column-gap: 51.25rem; |
| cg:206 | column-gap: 51.5rem; |
| cg:207 | column-gap: 51.75rem; |
| cg:208 | column-gap: 52rem; |
| cg:209 | column-gap: 52.25rem; |
| cg:210 | column-gap: 52.5rem; |
| cg:211 | column-gap: 52.75rem; |
| cg:212 | column-gap: 53rem; |
| cg:213 | column-gap: 53.25rem; |
| cg:214 | column-gap: 53.5rem; |
| cg:215 | column-gap: 53.75rem; |
| cg:216 | column-gap: 54rem; |
| cg:217 | column-gap: 54.25rem; |
| cg:218 | column-gap: 54.5rem; |
| cg:219 | column-gap: 54.75rem; |
| cg:220 | column-gap: 55rem; |
| cg:221 | column-gap: 55.25rem; |
| cg:222 | column-gap: 55.5rem; |
| cg:223 | column-gap: 55.75rem; |
| cg:224 | column-gap: 56rem; |
| cg:225 | column-gap: 56.25rem; |
| cg:226 | column-gap: 56.5rem; |
| cg:227 | column-gap: 56.75rem; |
| cg:228 | column-gap: 57rem; |
| cg:229 | column-gap: 57.25rem; |
| cg:230 | column-gap: 57.5rem; |
| cg:231 | column-gap: 57.75rem; |
| cg:232 | column-gap: 58rem; |
| cg:233 | column-gap: 58.25rem; |
| cg:234 | column-gap: 58.5rem; |
| cg:235 | column-gap: 58.75rem; |
| cg:236 | column-gap: 59rem; |
| cg:237 | column-gap: 59.25rem; |
| cg:238 | column-gap: 59.5rem; |
| cg:239 | column-gap: 59.75rem; |
| cg:240 | column-gap: 60rem; |
| cg:241 | column-gap: 60.25rem; |
| cg:242 | column-gap: 60.5rem; |
| cg:243 | column-gap: 60.75rem; |
| cg:244 | column-gap: 61rem; |
| cg:245 | column-gap: 61.25rem; |
| cg:246 | column-gap: 61.5rem; |
| cg:247 | column-gap: 61.75rem; |
| cg:248 | column-gap: 62rem; |
| cg:249 | column-gap: 62.25rem; |
| cg:250 | column-gap: 62.5rem; |
| cg:251 | column-gap: 62.75rem; |
| cg:252 | column-gap: 63rem; |
| cg:253 | column-gap: 63.25rem; |
| cg:254 | column-gap: 63.5rem; |
| cg:255 | column-gap: 63.75rem; |
| cg:256 | column-gap: 64rem; |
| cg:257 | column-gap: 64.25rem; |
| cg:258 | column-gap: 64.5rem; |
| cg:259 | column-gap: 64.75rem; |
| cg:260 | column-gap: 65rem; |
| cg:261 | column-gap: 65.25rem; |
| cg:262 | column-gap: 65.5rem; |
| cg:263 | column-gap: 65.75rem; |
| cg:264 | column-gap: 66rem; |
| cg:265 | column-gap: 66.25rem; |
| cg:266 | column-gap: 66.5rem; |
| cg:267 | column-gap: 66.75rem; |
| cg:268 | column-gap: 67rem; |
| cg:269 | column-gap: 67.25rem; |
| cg:270 | column-gap: 67.5rem; |
| cg:271 | column-gap: 67.75rem; |
| cg:272 | column-gap: 68rem; |
| cg:273 | column-gap: 68.25rem; |
| cg:274 | column-gap: 68.5rem; |
| cg:275 | column-gap: 68.75rem; |
| cg:276 | column-gap: 69rem; |
| cg:277 | column-gap: 69.25rem; |
| cg:278 | column-gap: 69.5rem; |
| cg:279 | column-gap: 69.75rem; |
| cg:280 | column-gap: 70rem; |
| cg:281 | column-gap: 70.25rem; |
| cg:282 | column-gap: 70.5rem; |
| cg:283 | column-gap: 70.75rem; |
| cg:284 | column-gap: 71rem; |
| cg:285 | column-gap: 71.25rem; |
| cg:286 | column-gap: 71.5rem; |
| cg:287 | column-gap: 71.75rem; |
| cg:288 | column-gap: 72rem; |
| cg:289 | column-gap: 72.25rem; |
| cg:290 | column-gap: 72.5rem; |
| cg:291 | column-gap: 72.75rem; |
| cg:292 | column-gap: 73rem; |
| cg:293 | column-gap: 73.25rem; |
| cg:294 | column-gap: 73.5rem; |
| cg:295 | column-gap: 73.75rem; |
| cg:296 | column-gap: 74rem; |
| cg:297 | column-gap: 74.25rem; |
| cg:298 | column-gap: 74.5rem; |
| cg:299 | column-gap: 74.75rem; |
| cg:300 | column-gap: 75rem; |
| cg:301 | column-gap: 75.25rem; |
| cg:302 | column-gap: 75.5rem; |
| cg:303 | column-gap: 75.75rem; |
| cg:304 | column-gap: 76rem; |
| cg:305 | column-gap: 76.25rem; |
| cg:306 | column-gap: 76.5rem; |
| cg:307 | column-gap: 76.75rem; |
| cg:308 | column-gap: 77rem; |
| cg:309 | column-gap: 77.25rem; |
| cg:310 | column-gap: 77.5rem; |
| cg:311 | column-gap: 77.75rem; |
| cg:312 | column-gap: 78rem; |
| cg:313 | column-gap: 78.25rem; |
| cg:314 | column-gap: 78.5rem; |
| cg:315 | column-gap: 78.75rem; |
| cg:316 | column-gap: 79rem; |
| cg:317 | column-gap: 79.25rem; |
| cg:318 | column-gap: 79.5rem; |
| cg:319 | column-gap: 79.75rem; |
| cg:320 | column-gap: 80rem; |
| cg:321 | column-gap: 80.25rem; |
| cg:322 | column-gap: 80.5rem; |
| cg:323 | column-gap: 80.75rem; |
| cg:324 | column-gap: 81rem; |
| cg:325 | column-gap: 81.25rem; |
| cg:326 | column-gap: 81.5rem; |
| cg:327 | column-gap: 81.75rem; |
| cg:328 | column-gap: 82rem; |
| cg:329 | column-gap: 82.25rem; |
| cg:330 | column-gap: 82.5rem; |
| cg:331 | column-gap: 82.75rem; |
| cg:332 | column-gap: 83rem; |
| cg:333 | column-gap: 83.25rem; |
| cg:334 | column-gap: 83.5rem; |
| cg:335 | column-gap: 83.75rem; |
| cg:336 | column-gap: 84rem; |
| cg:337 | column-gap: 84.25rem; |
| cg:338 | column-gap: 84.5rem; |
| cg:339 | column-gap: 84.75rem; |
| cg:340 | column-gap: 85rem; |
| cg:341 | column-gap: 85.25rem; |
| cg:342 | column-gap: 85.5rem; |
| cg:343 | column-gap: 85.75rem; |
| cg:344 | column-gap: 86rem; |
| cg:345 | column-gap: 86.25rem; |
| cg:346 | column-gap: 86.5rem; |
| cg:347 | column-gap: 86.75rem; |
| cg:348 | column-gap: 87rem; |
| cg:349 | column-gap: 87.25rem; |
| cg:350 | column-gap: 87.5rem; |
| cg:351 | column-gap: 87.75rem; |
| cg:352 | column-gap: 88rem; |
| cg:353 | column-gap: 88.25rem; |
| cg:354 | column-gap: 88.5rem; |
| cg:355 | column-gap: 88.75rem; |
| cg:356 | column-gap: 89rem; |
| cg:357 | column-gap: 89.25rem; |
| cg:358 | column-gap: 89.5rem; |
| cg:359 | column-gap: 89.75rem; |
| cg:360 | column-gap: 90rem; |
| cg:361 | column-gap: 90.25rem; |
| cg:362 | column-gap: 90.5rem; |
| cg:363 | column-gap: 90.75rem; |
| cg:364 | column-gap: 91rem; |
| cg:365 | column-gap: 91.25rem; |
| cg:366 | column-gap: 91.5rem; |
| cg:367 | column-gap: 91.75rem; |
| cg:368 | column-gap: 92rem; |
| cg:369 | column-gap: 92.25rem; |
| cg:370 | column-gap: 92.5rem; |
| cg:371 | column-gap: 92.75rem; |
| cg:372 | column-gap: 93rem; |
| cg:373 | column-gap: 93.25rem; |
| cg:374 | column-gap: 93.5rem; |
| cg:375 | column-gap: 93.75rem; |
| cg:376 | column-gap: 94rem; |
| cg:377 | column-gap: 94.25rem; |
| cg:378 | column-gap: 94.5rem; |
| cg:379 | column-gap: 94.75rem; |
| cg:380 | column-gap: 95rem; |
| cg:381 | column-gap: 95.25rem; |
| cg:382 | column-gap: 95.5rem; |
| cg:383 | column-gap: 95.75rem; |
| cg:384 | column-gap: 96rem; |
| cg:px | column-gap: 1px; |
Variants
Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:cg:4.
Breakpoints
Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.
| @xs:cg:4 | From 32rem up. |
| @sm:cg:4 | From 40rem up. |
| @md:cg:4 | From 48rem up. |
| @lg:cg:4 | From 64rem up. |
| @xl:cg:4 | From 80rem up. |
| @xxl:cg:4 | From 96rem up. |
Containers
Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.
| @c:xs:cg:4 | Container from 32rem up. |
| @c:sm:cg:4 | Container from 40rem up. |
| @c:md:cg:4 | Container from 48rem up. |
| @c:lg:cg:4 | Container from 64rem up. |
| @c:xl:cg:4 | Container from 80rem up. |
| @c:xxl:cg:4 | Container from 96rem up. |
Media
Apply a class when the device or the page matches a condition, or on the first frame an element renders.
| @pc:cg:4 | On a touch screen. |
| @prm:cg:4 | With reduced motion on. |
| @st:cg:4 | On the first frame. |
States
Apply a class only while the element is in a state, such as hovered, focused or checked.
| h:cg:4 | On :hover. |
| f:cg:4 | On :focus. |
| fv:cg:4 | On :focus-visible. |
| a:cg:4 | On :active. |
| d:cg:4 | On :disabled. |
| fc:cg:4 | On :first-child. |
| c:cg:4 | On :checked. |
| e:cg:4 | On :empty. |
| fw:cg:4 | On :focus-within. |
| i:cg:4 | On :invalid. |
| in:cg:4 | On :indeterminate. |
| lc:cg:4 | On :last-child. |
| nc:cg:4 | On :nth-child. |
| r:cg:4 | On :required. |
| ro:cg:4 | On :read-only. |
| v:cg:4 | On :valid. |
Pseudo Elements
Style a part of the element rather than the element itself, such as its placeholder or the selected text.
| a::cg:4 | On ::after. |
| b::cg:4 | On ::before. |
| p::cg:4 | On ::placeholder. |
| s::cg:4 | On ::selection. |