Rejillas receptivas puras de CSS

Posted on by Rudeus Greyrat

Pure CSS es un marco de CSS gratuito y de código abierto. CSS Grid Layout es un método diseñado para el diseño bidimensional de elementos con filas y columnas. Consta de módulos que no responden y que responden. La función del diseño receptivo es mostrar el contenido del sitio web automáticamente en todas las resoluciones y tamaños de pantalla, y evita cambios de tamaño innecesarios en los sitios web.

Clases de Pure CSS Grid : hay dos tipos de clases en Pure Grid.

  • Clases de cuadrícula ( puro-g )
  • Clases de unidades ( puro-u )

Cuadrícula regular pura vs Cuadrícula receptiva:
Cuadrícula regular:

  • No responde pero es fácil de usar.
  • Una fila se crea usando la clase pure-g .
  • Las columnas dentro de esa fila se crean usando las clases pure-u-* . Por ejemplo, pure-u-1-4 representa 1/4 o 25% de ancho, pure-u-2-5 representa 40% de ancho.

Sintaxis:

<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>

El ancho de la cuadrícula será 1/3, es decir, 33,33 %, independientemente del ancho de la pantalla y no será fácil de usar en todos los tipos de dispositivos.
 

Cuadrícula receptiva:

  • Personalizable y compatible con dispositivos móviles.
  • Se utilizan clases predefinidas de diferentes tamaños de cuadrícula con un poco de personalización según las necesidades de los usuarios.

Sintaxis:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

En pantallas pequeñas, esta cuadrícula tendrá un ancho del 100 %, pero en pantallas medianas tendrá un ancho del 33,33 %.

Consultas de medios para la formación de cuadrículas: el enlace CDN debe usarse para acceder a Pure CSS Grid con capacidad de respuesta móvil. Antes de las hojas de estilo específicas del proyecto, use el enlace que se proporciona a continuación entre las etiquetas de encabezado . Para generar una consulta de medios de acuerdo con el ancho de la pantalla, estas palabras clave se adjuntan a las clases Pure grid unit (pure-u).

Enlace CDN:

<enlace rel=”hoja de estilo” href=”https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css”>

Las siguientes palabras clave se utilizan para crear una cuadrícula.

Llave Consulta de medios CSS Aplica Nombre de la clase
   SM      @pantalla multimedia y (ancho mínimo: 35,5 em)     ≥ 568px     .puro-u-sm-*  
   Maryland   @pantalla multimedia y (ancho mínimo: 48em)   ≥ 768 píxeles   .puro-u-*
   lg   @pantalla multimedia y (ancho mínimo: 64em)   ≥ 1024px   .puro-u-lg-*
   SG   @pantalla multimedia y (ancho mínimo: 80em)   ≥ 1280px   .puro-u-xl-*

Nota: En las clases, el signo de asterisco (*) indica el ancho de las grillas y el número de columnas. Por ejemplo, ‘1-2’ representa que el div cubrirá ‘1/2’ o 50% del ancho total. ‘em’ se usa en lugar de ‘px’ para generar la consulta de medios predeterminada, de modo que responda al zoom de la página.
 

Ejemplo: este ejemplo creará 4 cuadrículas que tendrán un ancho del 100 % en la pantalla del móvil, un ancho del 50 % en la pantalla mediana y un ancho del 25 % en la pantalla del escritorio. 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Pure.CSS Responsive Grids</title>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/base-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css"> 
</head>
  
<body>
    <div class="pure-g">
        <div class="pure-u-md-1-1
                    pure-u-lg-1-2 pure-u-xl-1-4">
            <p> Responsive Grid 1 </p>
        </div>
        <div class="pure-u-md-1-1
                    pure-u-lg-1-2 pure-u-xl-1-4">
            <p> Responsive Grid 2 </p>
        </div>
        <div class="pure-u-md-1-1
                    pure-u-lg-1-2 pure-u-xl-1-4">
            <p> Responsive Grid 3 </p>
        </div>
        <div class="pure-u-md-1-2
                    pure-u-lg-1-3 pure-u-xl-1-6">
            <p> Responsive Grid 4 </p>
        </div>
    </div>
</body>
</html>

Producción:

 

Imágenes receptivas en la cuadrícula: en las cuadrículas receptivas, las imágenes también se agregan como contenido. Para mantener   la capacidad de respuesta, se agrega la clase .pure-img dentro de la cuadrícula.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Pure.CSS Responsive Grids</title>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/base-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">
    <style>
        .pure-img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
  
<body>
    <div class="pure-g">
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
                <p> Responsive Grid 1 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
                <p> Responsive Grid 2 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
                <p> Responsive Grid 3 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
                <p> Responsive Grid 4 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
                <p> Responsive Grid 5 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
                <p> Responsive Grid 6 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
                <p> Responsive Grid 7 </p>
            </div>
        </div>
        <div class="pure-u-md-1-1 pure-u-lg-1-2 pure-u-xl-1-4">
            <div class="l-box"> 
                <img class="pure-img" src=
    "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
                <p> Responsive Grid 8 </p>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

 

Referencia: https://purecss.io/grids/#pure-responsive-grids

Publicación traducida automáticamente

Artículo escrito por somshreya3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *