Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Las cuadrículas receptivas se pueden usar para crear diseños de cuadrícula receptivos que tengan todas las clases de ancho de columna, que se pueden usar para configurar de acuerdo con los puntos de interrupción. Los puntos de interrupción específicos se pueden utilizar para implementar el estilo receptivo particular. Se utiliza principalmente para cambiar el tamaño de los contenedores según el tamaño de la pantalla y los diferentes puntos de interrupción.
Primer clases de cuadrículas sensibles a CSS:
- col-*: esta clase especifica el número de columnas que ocupará el contenedor específico.
- col-sm-*: esta clase especifica el número de columnas que ocupará el contenedor específico cuando el ancho mínimo de la pantalla sea de 544 px.
- col-md-*: esta clase especifica el número de columnas que ocupará el contenedor específico cuando el ancho mínimo de la pantalla sea de 768 px.
- col-lg-*: esta clase especifica el número de columnas que ocupará el contenedor específico cuando el ancho mínimo de la pantalla sea de 1004 px.
- col-xl-*: Esta clase especifica el número de columnas que ocupará el contenedor específico cuando el ancho mínimo de la pantalla sea de 1280px.
El * representa el sistema de diseño basado en cuadrículas, que se divide en 12 cuadrículas en filas y columnas.
Sintaxis :
<div class="container-lg clearfix">
<div class="col-sm-6 col-md-3 col-lg-2">
...
</div>
</div>
Ejemplo 1: En el ejemplo que se muestra a continuación, los contenedores ocupan 3 columnas cada uno cuando la pantalla es pequeña, 4 columnas cada uno cuando la pantalla es mediana y 2 columnas cada uno cuando la pantalla es grande.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Responsive Grids</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Responsive Grids</h3> </div> <div class="container-lg clearfix"> <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border"> GeeksforGeeks </div> <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border"> GeeksforGeeks </div> <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 2: En el ejemplo que se muestra a continuación, los contenedores ocupan 4 columnas cada uno cuando la pantalla es pequeña, 2 columnas cada uno cuando la pantalla es mediana y 3 columnas cada uno cuando la pantalla es grande.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Responsive Grids</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="m-4"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Responsive Grids</h3> <br/> </div> <div class="container-lg clearfix"> <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border"> GeeksforGeeks </div> <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border"> GeeksforGeeks </div> <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/grid#responsive-grids
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA