TheGrid


Simple grid based in flexbox. Botstrap 4 compatible.

Grid based on 12 columns (Like a bootstrap 4)

1
2
3
4
5
6
7
8
9
10
11
12

 <div class="container column">
    <div class="col-1">1</div>
    <div class="col-2">2</div>
    <div class="col-3">3</div>
    <div class="col-4">4</div>
    <div class="col-5">5</div>
    <div class="col-6">6</div>
    <div class="col-7">7</div>
    <div class="col-8">8</div>
    <div class="col-9">9</div>
    <div class="col-10">10</div>
    <div class="col-11">11</div>
    <div class="col-12">12</div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12

 <div class="container column">
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">1</div>
    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">2</div>
    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">3</div>
    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">4</div>
    <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">5</div>
    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">6</div>
    <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7">7</div>
    <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">8</div>
    <div class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9">9</div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">10</div>
    <div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11">11</div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">12</div>
  </div>

1

<div class="container">
  <div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">1</div>
</div>

Order control(Resize screen)

1
2
3
4
5
6
7
8
9
10
11
12

 <div class="container column">
    <div class="col-1 col-xl-1 order-xl-1 order-sm-12 order-12">1</div>
    <div class="col-2 col-xl-2 order-xl-2 order-sm-11 order-11">2</div>
    <div class="col-3 col-xl-3 order-xl-3 order-sm-10 order-10">3</div>
    <div class="col-4 col-xl-4 order-xl-4 order-sm-9 order-9">4</div>
    <div class="col-5 col-xl-5 order-xl-5 order-sm-8 order-8">5</div>
    <div class="col-6 col-xl-6 order-xl-6 order-sm-7 order-7">6</div>
    <div class="col-7 col-xl-7 order-xl-7 order-sm-6 order-6">7</div>
    <div class="col-8 col-xl-8 order-xl-8 order-sm-5 order-5">8</div>
    <div class="col-9 col-xl-9 order-xl-9 order-sm-4 order-4">9</div>
    <div class="col-10 col-xl-10 order-xl-10 order-sm-3 order-3">10</div>
    <div class="col-11 col-xl-11 order-xl-11 order-sm-2 order-2">11</div>
    <div class="col-12 col-xl-12 order-xl-12 order-sm-1 order-1">12</div>
  </div>

Container row

1
2

<div class="container">
  <div class="">1</div>
  <div class="">2</div>
</div>

Container row-reverse

1
2

<div class="container row-reverse">
  <div class="">1</div>
  <div class="">2</div>
</div>

Container column

1
2

<div class="container column">
  <div class="">1</div>
  <div class="">2</div>
</div>

Container column-reverse

1
2

<div class="container column-reverse">
  <div class="">1</div>
  <div class="">2</div>
</div>

Flex-wrap: wrap

1
2

<div class="container wrap">
  <div class="">1</div>
  <div class="">2</div>
</div>

Flex-wrap: nowrap

1
2

<div class="container no-wrap">
  <div class="">1</div>
  <div class="">2</div>
</div>

Justify-content

1
2

<div class="container justify-content-start">
  <div class="">1</div>
  <div class="">2</div>
</div>
1
2

<div class="container justify-content-center">
  <div class="">1</div>
  <div class="">2</div>
</div>
1
2

<div class="container justify-content-end">
  <div class="">1</div>
  <div class="">2</div>
</div>
1
2

<div class="container justify-content-between">
  <div class="">1</div>
  <div class="">2</div>
</div>
1
2

<div class="container justify-content-around">
  <div class="">1</div>
  <div class="">2</div>
</div>

Align-items

1
2

<div class="container align-items-start">
  <div class="">1</div>
  <div class="">2</div>
</div>

1
2

<div class="container align-items-center">
  <div class="">1</div>
  <div class="">2</div>
</div>

1
2

<div class="container align-items-end">
  <div class="">1</div>
  <div class="">2</div>
</div>

1
2

<div class="container align-items-baseline">
  <div class="">1</div>
  <div class="">2</div>
</div>

1
2

<div class="container align-items-stretch">
  <div class="">1</div>
  <div class="">2</div>
</div>

Align-self

1
3
3
2
4

<div class="container align-items-center">
    <div class="">1</div>
    <div class="align-self-start">2</div>
    <div class="align-self-center">3</div>
    <div class="align-self-end">4</div>
    <div class="align-self-stretch">5</div>
  </div>

Flex-grow

1

<div class="container">
  <div class="flex-grow-1">1</div>
</div>

1
2

<div class="container">
  <div class="flex-grow-1">1</div>
  <div class="flex-grow-1">2</div>
</div>

1
2

<div class="container">
  <div class="flex-grow-1">1</div>
  <div class="flex-grow-5">2</div>
</div>

1
2
3
4
5

<div class="container wrap">
  <div class="flex-grow-1">1</div>
  <div class="flex-grow-2">2</div>
  <div class="flex-grow-3">3</div>
  <div class="flex-grow-4">4</div>
  <div class="flex-grow-5">5</div>
</div>

Flex-basis

1
2
3

<div class="container wrap">
 <div class="flex-basis-100">1</div>
 <div class="flex-basis-200">2</div>
 <div class="flex-basis-300">3</div>
</div>

1
2
3

<div class="container wrap">
 <div class="flex-basis-100">1</div>
 <div class="flex-basis-200">2</div>
 <div class="flex-basis-300 flex-grow-1">3</div>
</div>

1
2
3

<div class="container wrap column">
 <div class="flex-basis-100">1</div>
 <div class="flex-basis-200">2</div>
 <div class="flex-basis-300 flex-grow-1">3</div>
</div>

1
1
1
1
1
1
1
1
1
1
1
1

<div class="container">
 <div class="flex-basis-100">1</div>
</div>

<div class="container">
 <div class="flex-basis-200">2</div>
</div>

<div class="container">
 <div class="flex-basis-300">3</div>
</div>

<div class="container">
 <div class="flex-basis-400">4</div>
</div>

<div class="container">
 <div class="flex-basis-500">5</div>
</div>

<div class="container">
 <div class="flex-basis-600">6</div>
</div>

<div class="container">
 <div class="flex-basis-700">7</div>
</div>

<div class="container">
  <div class="flex-basis-800">8</div>
</div>

<div class="container">
  <div class="flex-basis-900">9</div>
</div>

<div class="container">
  <div class="flex-basis-1000">10</div>
</div>

<div class="container">
  <div class="flex-basis-1100">11</div>
</div>

<div class="container">
  <div class="flex-basis-1200">12</div>
</div>