Al crear un diseño de sitio web receptivo genuino, el sistema de cuadrícula es una herramienta crucial para los desarrolladores web. Una cuadrícula es un conjunto de clases que nos ayuda a dividir el ancho de la pantalla en unidades más pequeñas y hacer que el sitio web se vea receptivo en varios dispositivos. El Pure.CSS también presenta un sistema de cuadrícula de este tipo.
Clases de cuadrículas de CSS puro:
- Clases de cuadrícula (puro-g)
- Clases de participación (puro-u)
- Modificación de cuadrícula sensible a las clases de unidades
Incluya el sistema de cuadrícula: el sistema de cuadrícula no se incluye como parte de pure.css ya que las consultas de medios no se pueden sobrescribir, por lo que tenemos que colocar estos tres archivos CSS para implementar el sistema de cuadrícula. El enlace a los archivos se proporciona a continuación. Para obtener la última versión, puede visitar el sitio web oficial de Pure.CSS grids.
<enlace rel=”hoja de estilo” href=”https://unpkg.com/purecss@2.0.6/build/base-min.css”>
<enlace rel=”hoja de estilo” href=”https://unpkg.com /purecss@2.0.6/build/grids-min.css”>
<enlace rel=”hoja de estilo” href=”https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css” >
Clases de cuadrícula (pure-g): la clase ‘pure-g’ se conoce como la clase de cuadrícula del sistema de cuadrícula Pure.CSS. Funciona como un envoltorio de las clases unitarias. Cada clase de unidad Pure.CSS (pure-u) permanece como hijo de Grid Class (pure-g).
Sintaxis:
<div class="pure-g"> ..... Some Unit Classes ....</div>
Clases de unidades (puro-u): El ‘puro-u’ o ‘puro-u-*’ nos ayuda a dividir el ancho de la pantalla en fracciones. Si queremos obtener el m/n, la parte de la pantalla de visualización para un div. Luego tenemos que agregar la clase ‘pure-um-n’ a ese div específico. Supongamos que queremos ocupar los 2/5 de la pantalla, entonces tenemos que incluir la clase ‘pure-u-2-5’ en ese div específico.
Sintaxis:
<div class="pure-g">
<div class="pure-u-2-5">...Inner Elements...</div>
<div class="pure-u-3-5">...Inner Elements...</div>
</div>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Pure.CSS | 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-1-5"> <p> An interview-centric course designed for non-CS/pre-final/final year students and working professionals to land their dream jobs in service and product-based companies like Amazon, Microsoft, TCS, Cognizant and more! </p> </div> <div class="pure-u-4-5"> <p> An interview-centric course designed for non-CS/pre-final/final year students and working professionals to land their dream jobs in service and product-based companies like Amazon, Microsoft, TCS, Cognizant and more! </p> </div> </div> </body> </html>
Salida: a lo largo de toda la salida, podemos ver que nuestra cuadrícula es muy útil para dividir el ancho de la pantalla, pero no responde. Para hacer que el diseño responda, tenemos que trabajar con la ‘Modificación de cuadrícula receptiva a las clases de unidades’.
Modificación de la cuadrícula receptiva a las clases unitarias: Pure.CSS nos proporciona cuatro palabras clave diferentes, sm, md, lg, xl. Estas palabras clave se adjuntan con las clases de unidades de cuadrícula puras (pure-u) y se utilizan para generar una consulta de medios de acuerdo con el ancho de la pantalla. La condición y la consulta de medios para todas estas clases se dan a continuación:
|
Palabra clave |
Nombre de la clase |
Aplica |
Consulta de medios CSS |
|---|---|---|---|
|
SG |
.puro-u-xl-* |
≥ 1280px |
@pantalla multimedia y (ancho mínimo: 80em) |
|
lg |
.puro-u-lg-* |
≥ 1024px |
@pantalla multimedia y (ancho mínimo: 64em) |
|
Maryland |
.puro-u-md-* |
≥ 768 píxeles |
@pantalla multimedia y (ancho mínimo: 48em) |
|
SM |
.puro-u-sm-* |
≥ 568px |
@pantalla multimedia y (ancho mínimo: 35,5 em) |
Para generar la consulta de medios predeterminada, se usa ‘em’ en lugar de ‘px’ para que las consultas de medios respondan al zoom de la página web en consecuencia.
Sintaxis:
<div class="pure-g">
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
<div class="pure-u-sm-1 pure-u-md-1-5"> Inner Elements </div>
</div>
Ejemplo :
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Pure.CSS | 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-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 1 </p> </div> <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 2 </p> </div> <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 3 </p> </div> <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 4 </p> </div> <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 5 </p> </div> <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> <p> Text 6 </p> </div> </div> </body> </html>
Producción :
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA