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