CSS: Simple responsive grid in IE11

I made a responsive and super lightweight simple grid system for IE11. I would use display: grid; if I could, but I’m an IE-friendly gentleman, so I used only display: flex;.

We are hoping that it can work when you want only a simple, lightweight grid system, not so grandiose as to include a ready-made framework such as Bootstrap. The requests are as follows.

Works in IE11.
Column heights can be aligned.
Nesting is also possible.
Margins can be set freely.
No top and bottom margins.

That’s my super lightweight, simplified, responsive grid CSS!

The Sass version is described below.

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.row > .col_1_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 1 + 15px * (1 - 1)); }
.row > .col_2_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 2 + 15px * (2 - 1)); }
.row > .col_3_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 3 + 15px * (3 - 1)); }
.row > .col_4_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 4 + 15px * (4 - 1)); }
.row > .col_5_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 5 + 15px * (5 - 1)); }
.row > .col_6_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 6 + 15px * (6 - 1)); }
.row > .col_7_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 7 + 15px * (7 - 1)); }
.row > .col_8_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 8 + 15px * (8 - 1)); }
.row > .col_9_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 9 + 15px * (9 - 1)); }
.row > .col_10_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 10 + 15px * (10 - 1)); }
.row > .col_11_12 { width: calc((100% - 15px * (12 - 1)) / 12 * 11 + 15px * (11 - 1)); }
.row > .col_12_12 { width: 100%; }
.row > [class*="col_"] { box-sizing: border-box; }
@media (max-width: 768px) {
  .row:not(.not_fluid) > [class*="col_"] {
    width: 100%;
    margin-bottom: 15px;
  }
  .row:not(.not_fluid) > [class*="col_"]:last-child {
    margin-bottom: 0;
  }
}

As you may have noticed, I am an underscorer. I apologize if I offended you.

The CSS is applied as follows. Split left and right by the specified percentage, and wrap around the bottom if the denominator (12) is exceeded. If (max-width: 768px) is met, the width is 100%. Nice responsive.

<!-- 1:1 -->
<div class="row">
  <div class="col_6_12">col_6_12</div>
  <div class="col_6_12">col_6_12</div>
</div>

<!-- 1:2 -->
<div class="row">
  <div class="col_4_12">col_4_12</div>
  <div class="col_8_12">col_8_12</div>
</div>

<!-- Avoid vertical alignment even on mobile -->
<div class="row not_fluid">
  <div class="col_6_12">col_6_12</div>
  <div class="col_6_12">col_6_12</div>
</div>

Demo page

Change the margins

If you want to change the margins, modify the part that says 15px. In the above example, a fixed value of 15px is used, but it is also possible to specify a percentage.

For 8px:

.row > .col_1_12 { width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1)); }
.row > .col_2_12 { width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1)); }
.row > .col_3_12 { width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1)); }
/* (omitted) */
.row:not(.not_fluid) > [class*="col_"] {
  width: 100%;
  margin-bottom: 8px;
}

For 1%:

.row > .col_1_12 { width: calc((100% - 1% * (12 - 1)) / 12 * 1 + 1% * (1 - 1)); }
.row > .col_2_12 { width: calc((100% - 1% * (12 - 1)) / 12 * 2 + 1% * (2 - 1)); }
.row > .col_3_12 { width: calc((100% - 1% * (12 - 1)) / 12 * 3 + 1% * (3 - 1)); }
/* (omitted) */
.row:not(.not_fluid) > [class*="col_"] {
  width: 100%;
  margin-bottom: 1%;
}

* The margin-bottom and width values do not have to be unified.

Change maximum number of columns

Although it is listed in 12 divisions, it can be freely increased by customizing it in the same manner.

For 15 divisions:

.row > .col_1_15 { width: calc((100% - 15px * (15 - 1)) / 15 * 1 + 15px * (1 - 1)); }
.row > .col_2_15 { width: calc((100% - 15px * (15 - 1)) / 15 * 2 + 15px * (2 - 1)); }
.row > .col_3_15 { width: calc((100% - 15px * (15 - 1)) / 15 * 3 + 15px * (3 - 1)); }
/* the same applies hereafter. */

Of course, it can be reduced.

For 4 divisions:

.row > .col_1_4 { width: calc((100% - 15px * (4 - 1)) / 4 * 1 + 15px * (1 - 1)); }
.row > .col_2_4 { width: calc((100% - 15px * (4 - 1)) / 4 * 2 + 15px * (2 - 1)); }
.row > .col_3_4 { width: calc((100% - 15px * (4 - 1)) / 4 * 3 + 15px * (3 - 1)); }
.row > .col_4_4 { width: 100%; }

Both the margins and the maximum number of columns are easy to manage centrally using CSS custom properties. But I’m an IE-friendly gentleman, so I don’t do that. Gentlemen make it beautiful by coding with Sass, etc. If you mixin, you can make it with multiple patterns as much as you want.

That’s my super lightweight, simplified, responsive grid Sass!

The above CSS was changed to Sass (SCSS) to make it easier to specify margins and number of divisions.

@mixin col($margin: 0px, $denom: 12, $numer :1) {
  width: calc((100% - #{$margin} * (#{$denom} - 1)) / #{$denom} * #{$numer} + #{$margin} * (#{$numer} - 1));
}

@mixin row($denom, $margin: 0px, $margin_bottom: $margin) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  @for $num from 1 through $denom - 1 {
    > .col_#{$num}_#{$denom} { @include col($margin, $denom, $num); }
  }
  > .col_#{$denom}_#{$denom} { width: 100%; }
  > [class*="col_"] { box-sizing: border-box; }
  @media (max-width: 768px) {
    &:not(.not_fluid) > [class*="col_"] {
      width: 100%;
      margin-bottom: $margin_bottom;
    }
    &:not(.not_fluid) > [class*="col_"]:last-child {
        margin-bottom: 0;
    }
  }
}

/* Create an arbitrary class using the above mixin */
.row_1 {
  /* divisions: 12, margin: 10px, Bottom margin on mobile: 10px */
  @include row(12, 10px);
}
.row_2 {
  /* divisions: 6, margin: 10px, Bottom margin on mobile: 20px */
  @include row(6, 10px, 20px);
}

Postscript

May the world be more IE-friendly.