Responsive 6er Grid

Beispiel HiWHamburg

Um ein responsives 6er Grid in Contenseiten einzubinden müssen folgende Parameter ins CSS kopiert werden:

CSS Parameter

.responsive_table_6{
    width:15%;
    margin-right:1%;
    margin-bottom:1%;
    float:left;  
}

@media only screen and (max-width: 60em)
{
.responsive_table_6{
      width:29%;
  }
}

@media only screen and (max-width: 30em)
{
.responsive_table_6{
      width:47%;
  }
}

Anschließend kann folgender Block im Content eingebettet werden:

Content

<style type="text/css">.random_layout_class_6er
{
    border:1px solid #dadada;
    min-height:75px;
    text-align:center;
}</style><div style="margin-left: 4%;">
<div class="responsive_table_6 random_layout_class_6er">Kachel1</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel2</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel3</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel4</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel5</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel6</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel7</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel8</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel9</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel10</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel11</div>
<div class="responsive_table_6 random_layout_class_6er">Kachel12</div>

Dabei wird der Inhalt der Kacheln dort eingebettet, wo aktuell KachelX steht.