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. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
La cuadrícula es de 12 columnas y está basada en porcentajes. La cantidad de columnas que abarca un contenedor se puede ajustar a través de puntos de interrupción para diseños receptivos. Primer CSS Grid Containers nos brinda una funcionalidad tal que los anchos de los contenedores coinciden con nuestros puntos de interrupción y están disponibles en diferentes tamaños.
Primer CSS Grid Container Classes:
- container-sm: esta clase se utiliza para crear un ancho de contenedor de tamaño pequeño.
- container-md: esta clase se utiliza para crear un ancho de contenedor de tamaño mediano.
- container-lg: esta clase se utiliza para crear un ancho de contenedor de gran tamaño.
- container-xl: esta clase se usa para crear un ancho de contenedor del tamaño más grande.
Sintaxis:
<div class="container-md border">
...
</div>
Nota: La sintaxis para las otras clases es la misma excepto por el nombre de la clase que cambiará.
Ejemplo 1: El siguiente ejemplo demostrará el uso de la clase sm y la clase md para crear un contenedor de tamaño pequeño y mediano respectivamente.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Containers </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Grid Containers </h3> </div> <br> <div class="container-sm border"> <!--sm--> Small Container Grid </div> <div class="container-sm border"> Small Container Grid </div> <br> <div class="container-md border"> <!--md--> Medium Container Grid </div> <div class="container-md border"> Medium Container Grid </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demostrará el uso de la clase lg y la clase xl para crear un contenedor de gran tamaño y de mayor tamaño respectivamente.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Containers </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Grid Containers </h3> </div> <br> <div class="container-lg border"> <!--lg--> Large Container Grid </div> <div class="container-lg border"> Large Container Grid </div> <br> <div class="container-xl border"> <!--xl--> XL Container Grid </div> <div class="container-xl border"> XL Container Grid </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/grid#containers
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA