{"id":124704,"date":"2019-01-02T18:02:28","date_gmt":"2019-01-02T17:02:28","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-fluid-grid\/"},"modified":"2025-02-03T16:45:14","modified_gmt":"2025-02-03T15:45:14","slug":"create-a-fluid-grid","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/crear-una-rejilla-fluida","title":{"rendered":"Crea una cuadr\u00edcula fluida"},"content":{"rendered":"

Las rejillas fluidas pueden adaptar el contenido al tama\u00f1o de la pantalla. Para pantallas web, el contenido puede quedar mejor en tres columnas, mientras que en pantallas del tama\u00f1o de una tableta, el contenido puede quedar mejor en dos columnas. Para pantallas m\u00f3viles, el contenido podr\u00eda verse mejor apilado en una columna. Las rejillas fluidas definidas con eventos te permiten conseguirlo.

Rejilla de tres columnas:<\/h3>\n
    \n
  1. Arrastra un Panel Din\u00e1mico al Lienzo y cambia su anchura al 100%. A continuaci\u00f3n, cambia su dise\u00f1o a horizontal y su alineaci\u00f3n a centrada. Aseg\u00farate de que el desbordamiento horizontal est\u00e1 ajustado a \u00abEnvolver\u00bb y a\u00f1ade 20px de espaciado vertical y horizontal.
  2. Dentro de este panel, arrastra otro Panel Din\u00e1mico, que ser\u00e1 el primer contenedor del contenido en la rejilla. Ajusta su anchura al 31%. Arrastra algunos elementos al Panel Din\u00e1mico para que sirvan de contenido. En nuestro ejemplo, hemos arrastrado un Rect\u00e1ngulo con una imagen de fondo y tres widgets de Texto.
  3. Selecciona el Panel que has creado y c\u00f3pialo pulsando Comando\/Control-C. A continuaci\u00f3n, haz clic en el Panel Din\u00e1mico base que has creado y pulsa Comando\/Control-V. Esto duplicar\u00e1 el panel y lo colocar\u00e1 junto al otro panel que acabas de crear y copiar. \"M\u00faltiples<\/li>\n
  4. Altera el contenido dentro de ese panel y c\u00e1mbialo por lo que quieras.<\/li>\n
  5. Repite los pasos tres y cuatro unas cuantas veces m\u00e1s hasta que tengas seis paneles.Este es el aspecto que debe tener tu panel de tres columnas:
    \n\"Todos<\/li>\n<\/ol>\n

    Rejilla de dos columnas:<\/h3>\n
      \n
    1. Vuelve al panel base y a\u00f1ade otro panel. \u00c9ste ser\u00e1 la rejilla de dos columnas. Cambia la anchura de este panel a 100%, su Disposici\u00f3n a horizontal y su alineaci\u00f3n a centrada. Aseg\u00farate de que el desbordamiento horizontal tambi\u00e9n est\u00e1 ajustado a \u00abEnvolver\u00bb. A\u00f1ade algo de relleno y espaciado a la cuadr\u00edcula, si lo deseas.
      \n\"Configuraci\u00f3n<\/p>\n
      Nota:<\/strong> como el contenido de esta cuadr\u00edcula ser\u00e1 m\u00e1s largo que ancho, puede que tengas que aumentar la altura de este nuevo panel para que sea m\u00e1s largo y quepa todo el contenido.<\/div>\n<\/li>\n
    2. Dentro de este panel, arrastra otro Panel Din\u00e1mico. \u00c9ste ser\u00e1 el contenedor del contenido en la rejilla de dos columnas. Ajusta su anchura al 47%. Arrastra algunos elementos al Panel Din\u00e1mico para que sirvan de contenido. \"Configuraci\u00f3n<\/li>\n
    3. Selecciona el Panel que has creado y c\u00f3pialo pulsando Comando\/Control-C. A continuaci\u00f3n, haz clic en el Panel Din\u00e1mico base que has creado y pulsa Comando\/Control-V. Esto duplicar\u00e1 el panel y lo colocar\u00e1 junto al otro panel que creaste. \"Ver<\/li>\n
    4. Altera el contenido dentro de ese panel y c\u00e1mbialo por lo que quieras.<\/li>\n
    5. Repite tres y cuatro veces m\u00e1s hasta que tengas seis paneles.As\u00ed es como debe quedar tu panel de dos columnas:\"Todos<\/li>\n<\/ol>\n

      Rejilla de una columna:<\/h3>\n
        \n
      1. A\u00f1ade un panel m\u00e1s al panel base. Esta ser\u00e1 la rejilla de una columna. Dentro de este panel, cambia su anchura al 100%. Esta vez, cambia su Disposici\u00f3n a vertical, pero mant\u00e9n su alineaci\u00f3n al centro. Si\u00e9ntete libre de a\u00f1adir algo de espaciado vertical y relleno.
        \n\"Configuraci\u00f3n<\/p>\n
        Nota:<\/strong> al igual que en la \u00faltima columna, como el contenido de esta cuadr\u00edcula ser\u00e1 m\u00e1s largo que ancho, puede que tengas que aumentar la altura de este nuevo panel para que sea m\u00e1s largo y quepa todo el contenido.<\/div>\n<\/li>\n
      2. Dentro de este panel, arrastra otro Panel Din\u00e1mico. \u00c9ste ser\u00e1 el contenedor del contenido en la rejilla. Ajusta su anchura al 90%. Arrastra un Rect\u00e1ngulo y tres widgets de Texto dentro del Panel. Este ser\u00e1 el contenido de la rejilla. \"Subpaneles<\/li>\n
      3. Selecciona el Panel que has creado y c\u00f3pialo pulsando Comando\/Control-C. A continuaci\u00f3n, haz clic en el Panel Din\u00e1mico base que has creado y pulsa Comando\/Control-V. Esto duplicar\u00e1 el panel y lo colocar\u00e1 debajo del otro panel que creaste. \"Vista<\/li>\n
      4. Altera el contenido dentro de ese panel y c\u00e1mbialo por lo que quieras.<\/li>\n
      5. Repite los pasos tres y cuatro unas cuantas veces m\u00e1s hasta que tengas seis paneles.As\u00ed es como debe quedar tu panel de una columna:\"Todos<\/li>\n<\/ol>\n

        Puntos de interrupci\u00f3n<\/h3>\n

        Ahora crearemos los eventos de punto de ruptura que cambiar\u00e1n entre las vistas de columna en funci\u00f3n del tama\u00f1o de la pantalla. Sigue estos pasos para aprender a hacerlo:<\/p>\n

          \n
        1. Selecciona el Panel Din\u00e1mico base y crea un \u00abAl redimensionar la ventana\u00bb + \u00abEstablecer panel activo\u00bb y selecciona el panel de tres columnas que se establecer\u00e1 como activo.\n