html - library - Eliminar el margen en las columnas de tramo con Bourbon Neat

sass library

Question

Estoy empezando a utilizar Bourbon Neat de Thoughtbot para las cuadrículas receptivas. En general, es bastante astuto y realmente me gusta, pero estoy colgado de un pequeño problema.

Intento que dos columnas se junten una al lado de la otra sin los márgenes, pero después de tratar de replicar lo que tienen de sus ejemplos, no obtengo el mismo resultado.

Aquí está el HTML de muestra:

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Aquí está mi SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

Que produce esto:

Pero cuando intento hacer que las dos columnas se unan / junten entre sí usando el método de la tabla como muestra su ejemplo, obtengo esto:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

Salida:

Si voy al @include omega(); ruta que funciona, pero luego no expande todo el ancho de la última columna:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

Salida:

Esencialmente, podría simplemente omitir el contenido que está en la sección contenedor, que hace algo de lo que estoy buscando el resultado que estoy buscando. ¿Pero es necesario crear un div vacío para lograr eso ?:

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML (el contenido del .container está comentado):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Salida:

De todos modos, no sé cuál es la forma "adecuada" de lograr esto. La documentación no es realmente específica para explicar cómo conseguir dos columnas para anidar entre sí. Y de lo que intenté replicar en su ejemplo no produjo el mismo resultado.

A menos que necesite agregar un margin:0; específicamente margin:0; en la última columna

Answer 1

¿No extravió simplemente su p con contenido "Este es el contenedor", por lo que accidentalmente se usa como una celda de tabla pero realmente quiere que esté encima del contenedor?

.container encima .container y funciona:

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

Scss:

section {
  @include outer-container;
  text-align: center;
}

.container {
  @include fill-parent;
  @include row(table);

  .col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
  .col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
}

Salida:

Answer 2

Puede establecer las columnas de span () para cada contenedor por un poco menos de la mitad de la cuadrícula, luego cambie el valor restante que tomó de cada contenedor y desplace () cada contenedor fuera de los lados izquierdo / derecho como se muestra a continuación:

html:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

sass / sccs:

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

o tal vez use la combinación de dirección y contexto para cambiar la dirección de # 2 ...

sass / sccs:

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

No estoy seguro de si estoy 100% siguiendo su problema pero si quiere decir que no puede hacer que el lado DERECHO de la izquierda toque el lado IZQUIERDO derecho del div directamente en el medio, entonces creo que estas 2 soluciones funcionarán si juega con ellos un poco ...

Déjame saber cómo funciona ~ gl!

Answer 3

Puede hacer algo como @include span-columns (6 de 12, colapso de bloque)