Problema con FLEXBOX en un GRID

00israel · #1 (**permalink**) 26/10/2015, 03:30

Hola Buenos días a todos. Tengo una duda que espero podáis ayudarme a resolver.

Tengo este GRID en HTML:

Código HTML:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Flexbox responsive grid</title>
</head>
<body>
  <div class="wrapper">
    
    <div class="Grid Grid--full">
      
      <div class="Grid-cell">
        <div class="Demo">rosbad</div>
      </div>
    </div>

    <div class="Grid Grid--gutters Grid--cols-2">
      
      <div class="Grid-cell">
        <div class="otra">rosbad</div>
      </div>
      
       <div class="Grid-cell">
        <div class="Demo">rosbad</div>
      </div>
      
    </div>

    <div class="Grid Grid--gutters Grid--cols-3">
      <div class="Grid-cell"><div class="otra">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
    </div>

    <div class="Grid Grid--gutters Grid--cols-4">
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
    </div>

    <div class="Grid Grid--gutters Grid--cols-6">
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
    </div>

    <div class="Grid Grid--gutters Grid--cols-12">
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
      <div class="Grid-cell"><div class="Demo">rosbad</div></div>
    </div>
 </div>

Y este css:

Código:

body {
  color: #404040;
  font: 100 1em/150% "proxima-nova", Helvetica, sans-serif;
  background: orange;
}

.wrapper {
  max-width: 1200px;
  margin: 50px auto 0;
  background: green;
  padding: 1em 1em 0;
}

/*Basic Grid Styles*/
.Grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.Grid-cell {
  flex: 1;
}

.Demo {
  flex: 1;
  padding: 1em;
  margin-bottom: 1em;
  background: white;
  text-align: center;
}

.otra {
  text-align: right;
  color: red;
  background: blue;
  padding: 1em;
  margin-bottom: 1em;
}

/* With gutters*/
.Grid--gutters {
  margin-left: -1em;
}
.Grid--gutters .Grid-cell {
  padding-left: 1em;
}

/*===========================================*/
/* Base classes for all media - Mobile first */
.Grid--cols-2 > .otra {
  flex: 0 0 calc(50% - 1em);
}

.Grid--cols-3 > .Grid-cell {
  flex: 0 0 calc(100% - 1em);
}

.Grid--cols-4 > .Grid-cell {
  flex: 0 0 calc(50% - 1em);
}

.Grid--cols-6 > .Grid-cell {
  flex: 0 0 calc(50% - 1em);
}

.Grid--cols-12 > .Grid-cell {
  flex: 0 0 calc(33.3333% - 1em);
}

.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

/* Tablet (medium) screens */
@media (min-width: 30em) {
  .Grid--cols-4 > .Grid-cell {
    flex: 0 0 calc(50% - 1em);
  }

  .Grid--cols-6 > .Grid-cell {
    flex: 0 0 calc(33.3333% - 1em);
  }

  .Grid--cols-12 > .Grid-cell {
    flex: 0 0 calc(16.6666% - 1em);
  }
}
/* Large screens */
@media (min-width: 48em) {
  .Grid--cols-2 > .Grid-cell,
  .Grid--cols-3 > .Grid-cell,
  .Grid--cols-4 > .Grid-cell,
  .Grid--cols-6 > .Grid-cell,
  .Grid--cols-12 > .Grid-cell {
    flex: 1;
  }
}

Estoy estudiando y aprendiendo a trabajar un GRID con flexbox. Este ejemplo me lo encontré por internet. No exactamente así, porque este es uno simplificado que he dejado yo con solo lo que necesitaría.

Os explico lo que no entiendo o por mas que trasteo y modifico el código no consigo lo que quiero. No me gusta tener una estructura de html tan anidada, y más aún teniendo en cuenta que es un ejercicio para prácticar. Me gustaría prescindir del div que lleva la clase .Demo y del que lleva la clase .otra, es decir que todo lo que quisiera meter en cada celda fuera sin tener que anidarlo previamente en estos div.

He probado a pasar las propiedades de la clase .demo y de la clase .otra al div que tiene por encima pero no actúa como quisiera sobre todo cuando tiene más de una columna con lo que me da que el problema puede estar en .Grid--gutters pero tampoco me deja aplicarle los estilos que tiene esta clase, al div superior que lo anida.

no se, me estoy volviendo loco y no doy con ello. Alguien me puede echar una mano?