How to create my own Responsive 12 column css grid system using Flexbox?

Question

I want to create a Responsive 12 column grid system using CSS FLEXBOX for making my website responsive. I don't want to use any css framework instead I want to use my own 12 column grid system and with writing my own css. I want class names like this which are listed below. Any help would be appreciated.

I tried something like below. Please correct me.

*,
*::after,
*::before {
  box-sizing: border-box;
}
.container,
.container-full {
  width: 100%;
  margin: auto;
  padding: 0 1rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  padding: 1rem;
  border: 1px solid #ccc;
}
.col-1 {
  max-width: 8.333333333333333%;
}
.col-2 {
  max-width: 16.66666666666667%;
}
.col-3 {
  max-width: 25%;
}
.col-4 {
  max-width: 33.333333333333333%;
}
.col-5 {
  max-width: 41.66666666666667%;
}
.col-6 {
  max-width: 50%;
}
.col-7 {
  max-width: 58.333333333333333%;
}
.col-8 {
  max-width: 66.66666666666666%;
}
.col-9 {
  max-width: 75%;
}
.col-10 {
  max-width: 83.333333333333333%;
}
.col-11 {
  max-width: 91.66666666666666%;
}
.col-12 {
  max-width: 100%;
}

Answer 1

The principle is rather straightforward

• create a wrapping flexbox row container (.flex-row)
• for layout purposes make sure the row child elements are allowed to grow
• [OPTIONAL]ly set a minimum width for child elements to force wrapping when on smaller devices
• create the various column widths like you did in your CSS, but using flex-basis instead of max-width. Combined with flex: 1 the flexbox mechanism takes care of space distribution between the child elements.

snippet so you have some base to toy with...

BTW, notice the responsive base font size inside 'eye-candy'

/* for debugging */
[outlines="1"] * { outline: 1px dashed }

*    { box-sizing: border-box }

/*************/
/* mechanism */
/*************/
.flex-row { display: flex; flex-flow: row wrap; width: 100% }

.flex-row > * {
  flex: 1; /* allow children to grow when space available */

  /* [OPTIONAL] set a 'min-width' if you want to force some wrapping */
  min-width: 7.5rem; /* max 3*120px columns on a 360px device */
}

.col-1  { flex-basis:   8.33% }
.col-2  { flex-basis:  16.66% }
.col-3  { flex-basis:  25%    }
.col-4  { flex-basis:  33.33% }
.col-5  { flex-basis:  41.66% }
.col-6  { flex-basis:  50%    }
.col-7  { flex-basis:  58.33% }
.col-8  { flex-basis:  66.66% }
.col-9  { flex-basis:  75%    }
.col-10 { flex-basis:  83.33% }
.col-11 { flex-basis:  91.66% }
.col-12 { flex-basis: 100%    }

/*************/
/* eye-candy */
/*************/
/* responsive base font size: 14px at 320, 20px at 1280 vmin */
/* smoothly scaled font size relative to current vmin */
html { font-size: calc(0.625vmin + 0.75rem) }

body { margin: 0 }

.container { border: 1px solid black }

.header, .footer, [class^="col-"] {
  padding: .75rem;
  border : 2px solid black;
}
.footer>* { font-size: .75em; text-align: right }

<div class="container" outlines="0">
    <div class="flex-row header">
        <h1>hea&shy;der</h1>
    </div>

    <div class="flex-row">
        <div class="col-3">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
            </ul>
        </div>

        <div class="col-9">
            <h3>Item Header</h3>
            <p>Some fun item you have got something to say about!</p>
        </div>
    </div>
    
    <div class="flex-row">
        <div class="col-1">col 1</div>
        <div class="col-2">col 2</div>
        <div class="col-9">col 9</div>
    </div>
    
    <div class="flex-row">
        <div class="col-4">col 4</div>
        <div class="col-5">col 5</div>
        <div class="col-3">col 3</div>
    </div>
    
    <div class="flex-row">
        <div class="col-7">col 7</div>
        <div class="col-3">col 3</div>
        <div class="col-2">col 2</div>
    </div>
    
    <div class="flex-row">
        <div class="col-10">col 10</div>
        <div class="col-2">col 2</div>
    </div>
    
    <div class="flex-row">
        <div class="col-11">col 11</div>
        <div class="col-1">col 1</div>
    </div>
    
    <div class="flex-row">
        <div class="col-12">col 12</div>
    </div>
    
    <div class="flex-row footer">
        <div>Footer</div>
    </div>
</div>