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.
Primer CSS Grid Offset Columns se utilizan para empujar el div a X columnas usando las clases de desplazamiento. Podemos desplazar nuestro elemento a cualquier número de columnas. En este artículo, discutiremos las columnas de desplazamiento de cuadrícula de Primer CSS.
Primer CSS Grid Offset Columns Clases:
- offset-*: Las clases varían de 0 a 12 para compensar las columnas.
Sintaxis:
<div class="clearfix">
<div class="offset-* col-3 border p-3">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra las columnas de desplazamiento de cuadrícula de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Offset Columns </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Grid Offset Columns </h3> <br> <div class="clearfix"> <div class="offset-1 col-2 border p-2"> GeeksforGeeks1 </div> <div class="offset-3 col-2 border p-2"> GeeksforGeeks2 </div> </div> </div> </body> </html>
Producción:
Primer CSS Grid Offset Columns
Ejemplo 2: El siguiente ejemplo demuestra las columnas de desplazamiento de cuadrícula de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Offset Columns </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Grid Offset Columns </h3> <br> <div class="clearfix"> <div class="offset-1 col-2 border p-2"> GeeksforGeeks1 </div> <div class="offset-3 col-2 border p-2"> GeeksforGeeks2 </div> <div class="offset-6 col-2 border p-2"> GeeksforGeeks3 </div> <div class="offset-5 col-2 border p-2"> GeeksforGeeks4 </div> </div> </div> </body> </html>
Producción:
Primer CSS Grid Offset Columns
Referencia: https://primer.style/css/utilities/grid#offset-columns
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA