cq-strap.css

Kurt Andro, 27. August 2026

What is it?

cq-strap.css is a version of the Bootstrap 5 column class system.

What is the difference to the Bootstrap column classes?

cq-strap.css uses container queries (instead of media queries) and container-type: inline-size. Both of them have been supported by all major desktop and mobile browsers for more than three and a half years now.
See container queries on web features EXPLORER
The range of min-width steps is 0 to 2400px. Each step increases the width by 200px.
There is no "!important" on any CSS property, so you can easily overwrite them in your own CSS if necessary.

Rows and columns

Rows and columns do not refer to the viewport width but to the width of the place they are currently in.
Column class names have the prefix mw[NUM]- (for min-width).
A row needs the class cq-row (which refers to its parent's container width).
And a cq-row has to be surrounded by a div with the class cq-wrapper
so its width will be used to determine the width of each column inside the cq-row.

Steps and widths

In Bootstrap there are 6 steps from xs to xxl
cq-strap.css provides these steps:

class prefix	min-width
mw0-	0px
mw200-	200px
mw400-	400px
mw600-	600px
mw800-	800px
mw1000-	1000px
mw1200-	1200px
mw1400-	1400px
mw1600-	1600px
mw1800-	1800px
mw2000-	2000px
mw2200-	2200px
mw2400-	2400px

Class names and how to read them

mw200-6of12
→ from a min-width of 200px upwards use 6 of the 12 columns
mw400-4of12
→ from a min-width of 400px upwards use 4 of the 12 columns

Simple example

To check out the capabilities of cq-strap.css, watch this page on a screen with a width of at least 1400 pixels and play around with the viewport (window) width.

Do not forget to wrap everything in a div with the cq-wrapper class:

<div class="cq-wrapper">
  <div class="cq-row">
    <div class="mw600-6of12 mw1000-4of12">1</div>
    <div class="mw600-6of12 mw1000-4of12">2</div>
    <div class="mw600-6of12 mw1000-4of12">3</div>
    <div class="mw600-6of12 mw1000-4of12">4</div>
    <div class="mw600-6of12 mw1000-4of12">5</div>
    <div class="mw600-6of12 mw1000-4of12">6</div>
  </div>
</div>

Optional usage: the media query way

You can put the cq-wrapper class in the body tag and not directly wrap your row in a cq-wrapper. In this case it would work as a media query. See the difference from the example above.

<div class="cq-row">
  <div class="mw600-6of12 mw1000-4of12">1</div>
  <div class="mw600-6of12 mw1000-4of12">2</div>
  <div class="mw600-6of12 mw1000-4of12">3</div>
  <div class="mw600-6of12 mw1000-4of12">4</div>
  <div class="mw600-6of12 mw1000-4of12">5</div>
  <div class="mw600-6of12 mw1000-4of12">6</div>
</div>

Two examples for getting 1 to 12 columns of equal width

Easy

<div class="cq-wrapper">
  <div class="cq-row">
    <div class="mw600-col">1</div>
    <div class="mw600-col">2</div>
    <div class="mw600-col">3</div>
    <div class="mw600-col">4</div>
    <div class="mw600-col">5</div>
  </div>
</div>

Easier and less verbose

<div class="cq-wrapper">
  <div class="cq-row mw600-5rowcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

A nice way to use flexbox's basic behaviour

Easy

<div class="cq-wrapper">
  <div class="cq-row">
    <div class="mw600-autocol">1</div>
    <div class="mw600-autocol">22</div>
    <div class="mw600-autocol">333</div>
    <div class="mw600-autocol">4444</div>
    <div class="mw600-autocol">55555</div>
    <div class="mw600-autocol">666666</div>
  </div>
</div>

333

4444

55555

666666

Easier and less verbose

<div class="cq-wrapper">
  <div class="cq-row mw600-autorowcol">
    <div>1</div>
    <div>22</div>
    <div>333</div>
    <div>4444</div>
    <div>55555</div>
    <div>666666</div>
  </div>
</div>

333

4444

55555

666666

Gutters (gaps)

Gutter classes work the same as in Bootstrap. Just don't forget the min-width prefixes.

<div class="cq-wrapper">
  <div class="cq-row mw400-2rowcol mw400-gy2 mw600-gy3 mw800-gy4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

Ordering columns

The order classes work the same as in Bootstrap. Don't forget to put a class on every single column. Otherwise it will not work!

<div class="cq-wrapper">
  <div class="cq-row mw400-3rowcol">
    <div class="mw600-order2">1</div>
    <div class="mw600-order1">2</div>
    <div class="mw600-order3">3</div>
  </div>
</div>

Also in cq-strap.css

d-block and d-none
justify-content, align-items, align-content and align-self
text-start, -end and -center

<div class="cq-wrapper">
    <div class="cq-row mw0-autorowcol mw400-justify-content-end
                                      mw600-justify-content-center
                                      mw800-justify-content-between
                                      mw1000-justify-content-around">
    <div>1</div>
    <div>2</div>
    <div class="mw0-d-none mw600-d-block">3</div>
  </div>
</div>

<div class="cq-wrapper">
  <div class="cq-row mw800-4rowcol">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="mw0-align-self-end">2</div>
    <div class="mw0-align-self-center">3</div>
    <div class="mw0-align-self-stretch">4</div>
  </div>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<div class="cq-wrapper">
  <div class="cq-row mw600-text-center mw800-text-end">
    <div>1</div>
    <div>2</div>
    <div class="mw600-text-end mw800-text-start">3</div>
  </div>
</div>

File sizes

file name	file size
cq-strap.css	59.4 kB
cq-strap.min.css	43.3 kB

Minified by: https://www.cssportal.com/css-formatter/

Reducing file sizes

I prefer readability over file size, but if you think the class names are too verbose, you could reduce the file size by renaming the classes. For example: mw600-2of12 could become s3c2 (for step 3 / 2 columns). And you could remove complete class blocks if you do not need certain min-width steps, for example 2000px, 2200px, and 2400px.

Usefulness and mistakes

Having a bootstrap-like column system working with container queries and more width steps is useful for me. I would love if it were useful to you as well. Let me know if you like it, or if you find errors or have any suggestions.