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 Column Widths se utiliza para especificar los anchos de las columnas basadas en porcentajes para cualquier bloque y elemento en línea.
Primer CSS Cuadrícula Anchos de columna Clases:
- col-*: esta clase se utiliza para especificar el número de columnas que ocupa el elemento.
- float-right: esta clase se usa para hacer flotar el elemento a la derecha.
Sintaxis:
<div>
<div class="col-4 float-right">
...
</div>
<p> .... </p>
</div>
Ejemplo 1: El siguiente ejemplo demuestra los anchos de columna de cuadrícula de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Column Widths </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 Column Widths </h3> <br> <div> <div class="col-4 float-right p-1 border-dashed color-fg-success"> <strong> Floated right </strong> </div> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> </div> </div> </body> </html>
Producción:
Anchos de columna de cuadrícula de Primer CSS
Ejemplo 2: El siguiente ejemplo demuestra los anchos de columna de cuadrícula de Primer CSS usando imágenes .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Column Widths </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 Column Widths </h3> <br> <div> <div class="col-3 float-right p-1 color-fg-success"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> <div class="col-4 float-right p-1 color-fg-success"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png" > </div> <p> A Computer Science portal for geeks. It contains well written, well thought and well-explained computer science and programming articles. A Computer Science portal for geeks. It contains well written, well thought and well-explained computer science and programming articles </p> </div> </div> </body> </html>
Producción:
Anchos de columna de cuadrícula de Primer CSS
Referencia: https://primer.style/css/utilities/grid#column-widths
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA