Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático asegura que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es un modelo altamente reutilizable.
La cuadrícula contiene 12 columnas y se basa en porcentajes. Los diseños receptivos se pueden diseñar con una cantidad de columnas que abarca un contenedor que se puede ajustar en los puntos de interrupción. El sistema de cuadrícula facilita una variedad de utilidades que se pueden utilizar para obtener diferentes diseños y resultados.
Componentes básicos de la cuadrícula CSS:
- Cuadrículas de Flexbox : las cuadrículas de Flexbox se utilizan para obtener diseños receptivos. Las cuadrículas flexbox son útiles para mantener las columnas a la misma altura, justificar el contenido y alinear elementos verticalmente.
- Cuadrícula basada en flotación : se utiliza para hacer flotar el contenedor a la izquierda o a la derecha.
- Nesting : Se utiliza para poner la rejilla dentro de otra rejilla. Podemos poner cuadrículas infinitas dentro de las columnas porque el ancho de la columna está en porcentajes.
- Centrar una columna : Centrar columna centra las columnas dentro del contenedor. Podemos centrar las columnas usando la clase mx-auto .
- Anchos de columna : se utilizan para especificar los anchos de columna basados en porcentajes de cualquier bloque y elemento en línea.
- Columnas compensadas : se usan para empujar el div a X columnas usando las clases compensadas. Podemos desplazar nuestro elemento a cualquier número de columnas.
- Canalones : Gutters Grid se usa para crear los canalones usando los estilos y las clases de utilidad de relleno. Tenemos estilos de canalón como canalón condensado y canalón espacioso.
- Cuadrículas de bloques en línea : muchas columnas se pueden ajustar a través de puntos de interrupción en un contenedor para obtener resultados receptivos.
- Cuadrículas de tablas de visualización : se utilizan para crear la tabla con la ayuda de clases de utilidades de tablas de visualización. La altura del contenedor será la misma para todas las columnas cuando la longitud del contenido sea diferente.
- 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 establecer según 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.
- Contenedores : los contenedores nos brindan una funcionalidad tal que los anchos de los contenedores coinciden con nuestros puntos de interrupción y están disponibles en diferentes tamaños.
Sintaxis:
<div class="Primer-CSS-Component-Class">...</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de varias clases de cuadrículas flexbox, a saber , col-2, d-inline-flex,d-flex,flex-items-center, flex-md-items-start.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Grid</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 class="color-fg-success">GeeksforGeeks </h1>
<h2> Primer CSS flexbox-grids</h2>
<div class="d-inline-flex flex-column">
<div class="col-2 d-flex flex-items-center
flex-md-items-start">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220520210735/geeksimage2-200x146.png"
alt="gfgImage" />
</div>
<div class="col-2 d-flex
flex-items-center">
<img class="" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220520210648/geeksimage-200x145.png"
alt="gfgImage2" />
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de clases de medianil para grid, a saber , gutter-spacious y gutter-condensed.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Grid</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 class="color-fg-success">GeeksforGeeks </h1>
<h2> Primer CSS Gutter grids</h2>
<strong> Gutters Spacious: </strong>
<div class="clearfix gutter-spacious border">
<div class="col-4 float-left">
<div class="border color-border-accent-emphasis">
GeeksforGeeks 1
</div>
</div>
<div class="col-4 float-right">
<div class="border color-border-accent-emphasis">
GeeksforGeeks Right
</div>
</div>
<div class="col-4 float-left">
<div class="border color-border-accent-emphasis">
GeeksforGeeks 2
</div>
</div>
</div> <br> <br>
<strong> Gutters Condensed: </strong>
<div class="clearfix gutter-condensed border">
<div class="col-4 float-left">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 1
</div>
</div>
<div class="col-4 float-left">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 2
</div>
</div>
<div class="col-4 float-right">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 3
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/grid
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA