3

Estoy viendo un vídeo sobre el sistema de rejillas en css, pero me surge una duda, a nivel de teoría. En estos momentos, el sistema de rejillas, por ejemplo el de Foundation ¿se utiliza para usarlo con Css grid y flexbox o ya no es necesario con los módulos que he indicado?

Gracias!

2 respuestas 2

4

una vez integres la librería puede ser Foundation o Bootstrap no necesitarás utilizar las reglas css grid ni flexbox simplemente le das las clases correspondientes a la documentación de dichas librerías para que funcione.

Por ejemplo en bootstrap si quieres realizar 4 columnas es algo así:

<div class="container">
  <div class="row">
    <div class="col-md-4">Contenido</div>
    <div class="col-md-4">Contenido</div>
    <div class="col-md-4">Contenido</div>
    <div class="col-md-4">Contenido</div>
  </div>
</div>

Y solo con este HTML obtendrás 4 columnas de igual tamaño y responsive.

Espero te sirva mi respuesta.

Saludos!

5
  • Genial, me ha ayudado mucho. Muchas gracias!
    – Raúl
    el 4 ene. 2018 a las 20:58
  • Un gusto poder ayudarte! En caso de que la ayuda fue suficiente agradezco le des como resuelta a la pregunta, es un buen gesto! el 12 ene. 2018 a las 21:43
  • La verdad que no se como se resuelve una pregunta, si me lo explicas, ahora mismo lo hago. Gracias.
    – Raúl
    el 15 ene. 2018 a las 22:28
  • @Raúl debajo de las flechas de votación, aparece un icono, presiona ese sobre la mejor respuesta. Es la mejor forma de agradecer a quien te responde en esta comunidad. el 27 ene. 2018 a las 16:25
  • Gracias @EdgarGutiérrez será para la próxima :) el 1 feb. 2018 a las 20:22
0

hace poco me hice en SCSS un pequeño código para generar un sistema de rejillas de 12 columnas basados en flexbox, esto si no quieres depender de un framework.

HTML

<div class="flex-container">
   <div class="flex-row">
      <div class="flex-col-sm-12 flex-col-md-6 flex-col-lg-2"></div>
      <div class="flex-col-sm-12 flex-col-md-6 flex-col-lg-2"></div>
      <div class="flex-col-sm-12 flex-col-md-12 flex-col-lg-8"></div>
   </div>
</div>

SCSS

[class^='flex-col'] { width: 100%; }

$breakpoints: (
  xs: 540px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}

@each $name, $value in $breakpoints {
  .flex-container {
    @media (min-width: $value) {
      max-width: $value;
    }
  }
  .flex-col-#{$name} {
    @for $i from 1 through 12 {
      &-#{$i} {
        box-sizing: border-box;
        padding: 1em;
        @media (min-width: $value) {
          width: calc(100% * (#{$i} / 12));
        }
      }
    }
  }
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

https://codepen.io/neoxsaibot/pen/yraZEd

Si necesitas el CSS puedes ir a esta web https://www.sassmeister.com/ para convertir de sass a css.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.