Grid

Bereit

HTML
Template
Inhalt
Assets
Info
Notizen


        
        <div class="desc desc-line">Grid system</div>

<pre><code>.container</code></pre>
<div class="container grid-example">
    <div class="row">
        <div class="col-md-12 grid-example__name">12 Columns</div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-example__name">6 Columns</div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-example__name">4 Columns</div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-example__name">3 Columns</div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-example__name">2 Columns</div>
        <div class="col-6 bg-light column-example">
            .col-6
        </div>
        <div class="col-6 bg-light column-example">
            .col-6
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-example__name">1 Column</div>
        <div class="col-12 bg-light column-example">
            .col-12
        </div>
    </div>
</div>

<pre><code>.container-fluid</code></pre>
<div class="container-fluid grid-example">
    <div class="row">
        <div class="col-12 grid-example__name">12 Columns</div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
        <div class="col-1 bg-light column-example">
            .col-1
        </div>
    </div>
    <div class="row">
        <div class="col-12 grid-example__name">6 Columns</div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
        <div class="col-2 bg-light column-example">
            .col-2
        </div>
    </div>
    <div class="row">
        <div class="col-12 grid-example__name">4 Columns</div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
        <div class="col-3 bg-light column-example">
            .col-3
        </div>
    </div>
    <div class="row">
        <div class="col-12 grid-example__name">3 Columns</div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
        <div class="col-4 bg-light column-example">
            .col-4
        </div>
    </div>
    <div class="row">
        <div class="col-12 grid-example__name">2 Columns</div>
        <div class="col-6 bg-light column-example">
            .col-6
        </div>
        <div class="col-6 bg-light column-example">
            .col-6
        </div>
    </div>
    <div class="row">
        <div class="col-12 grid-example__name">1 Column</div>
        <div class="col-12 bg-light column-example">
            .col-12
        </div>
    </div>
</div>

<style>
    .grid-example {}

    .column-example {
        font-size: 12px;
        font-family: monospace;
        height: 60px;
        background-clip: content-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grid-example__name {
        margin-top: 15px;
        font-size: 16px;
    }

    pre {
        margin-top: 60px;
    }
</style>


        <div class="desc desc-line">Grid system</div>

<pre><code>.container</code></pre>
<div class="container grid-example">
    {{#each grids}}
    <div class="row">
        <div class="col-md-12 grid-example__name">{{ name }}</div>
        {{#each cols}}
        <div class="col-{{ this }} bg-light column-example">
            .col-{{ this }}
        </div>
        {{/each}}
    </div>
    {{/each}}
</div>

<pre><code>.container-fluid</code></pre>
<div class="container-fluid grid-example">
    {{#each grids}}
    <div class="row">
        <div class="col-12 grid-example__name">{{ name }}</div>
        {{#each cols}}
        <div class="col-{{ this }} bg-light column-example">
            .col-{{ this }}
        </div>
        {{/each}}
    </div>
    {{/each}}
</div>

<style>
    .grid-example {
    }

    .column-example {
        font-size: 12px;
        font-family: monospace;
        height: 60px;
        background-clip: content-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grid-example__name {
        margin-top: 15px;
        font-size: 16px;
    }

    pre {
        margin-top: 60px;
    }
</style>


        
            
            {
  "grids": [
    {
      "name": "12 Columns",
      "cols": [
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1
      ]
    },
    {
      "name": "6 Columns",
      "cols": [
        2,
        2,
        2,
        2,
        2,
        2
      ]
    },
    {
      "name": "4 Columns",
      "cols": [
        3,
        3,
        3,
        3
      ]
    },
    {
      "name": "3 Columns",
      "cols": [
        4,
        4,
        4
      ]
    },
    {
      "name": "2 Columns",
      "cols": [
        6,
        6
      ]
    },
    {
      "name": "1 Column",
      "cols": [
        12
      ]
    }
  ]
}

Datei:

Inhalt:


                                // 5-Columns-Grid
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-15 {
  width: 20%;
  float: left;
}

@include media-breakpoint-up(sm) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}
@include media-breakpoint-up(md) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}
@include media-breakpoint-up(lg) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}

URL: /components/raw/grid/grid.scss
Pfad Dateisystem: components\01-general\grid\grid.scss
Größe: 500 Bytes

Handle: @grid
Vorschau:
- Mit layout
- Nur Komponente
Pfad Dateisystem: components\01-general\grid\grid.hbs

Keine Notizen vorhanden.

Information

Version:: 0.7.5
Stand:: 17.3.2021