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 Float based Grid se usa para hacer flotar el contenedor a la izquierda o a la derecha. Usamos la clase clearfix con las clases container y float para flotar el contenido. Usaremos la clase float-left para hacer flotar el contenedor hacia la izquierda y la clase float-right para hacer flotar el contenedor hacia la derecha. En este artículo, discutiremos Primer CSS Float basado en Grid.
Primer CSS Clases de cuadrícula basadas en flotadores:
- float-left: esta clase se usa para hacer flotar el contenedor a la izquierda.
- float-right: esta clase se usa para hacer flotar el contenedor a la derecha.
Sintaxis:
<div class="container clearfix">
<div class="col-4 Float-based-Grid-Class">
....
</div>
....
</div>
Ejemplo 1: El siguiente ejemplo demuestra el Grid basado en Float de Primer CSS utilizando la clase float-left .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Float based Grid </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 Float based Grid </h3> </div> <br> <br> <div class="container clearfix"> <div class="col-3 float-left border p-lg-2"> <h3> GFG 1 </h3> </div> <div class="col-3 float-left border p-lg-2"> <h3> GFG 2 </h3> </div> <div class="col-3 float-left border p-lg-2"> <h3> GFG 3 </h3> </div> <div class="col-3 float-left border p-lg-2"> <h3> GFG 4 </h3> </div> </div> </body> </html>
Producción:
Primer CSS Float basado en Grid usando la clase float-left
Ejemplo 2: El siguiente ejemplo demuestra el Grid basado en Float de Primer CSS utilizando la clase float-right .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Float based Grid </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 Float based Grid </h3> </div> <br> <br> <div class="container clearfix"> <div class="col-4 float-right border p-lg-2"> <h3> Float right 1 </h3> </div> <div class="col-4 float-right border p-lg-2"> <h3> Float right 2 </h3> </div> <div class="col-4 float-right border p-lg-2"> <h3> Float right 3 </h3> </div> </div> </body> </html>
Producción:
Primer CSS Float basado en Grid usando la clase float-right
Referencia: https://primer.style/css/utilities/grid#float-based-grid
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA