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 Gutters Grid se usa para crear los Gutters utilizando los estilos y las clases de utilidad de relleno. Tenemos estilos de canalón como canalón condensado y canalón espacioso . También tenemos clases de utilidad de relleno para crear el diseño de la canaleta.
Primer CSS Gutters Grid Classes:
- canaleta: Esta clase se utiliza para crear la canaleta.
- gutter-condensed: esta clase se utiliza para crear canales condensados.
- gutter-spacious: esta clase se utiliza para crear canaletas espaciosas.
Sintaxis:
<div class="clearfix Gutters-Grid-Class border">
<div class="col-3 float-left">
<div class="border p-3">...</div>
</div>
....
</div>
Ejemplo 1: El siguiente ejemplo demuestra Primer CSS Gutters Grid.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Gutters 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 Gutters Grid </h3> <br> <strong> Gutters Spacious: </strong> <div class="clearfix gutter-spacious border"> <div class="col-4 float-left"> <div class="border p-2"> GeeksforGeeks 1 </div> </div> <div class="col-4 float-right"> <div class="border p-2"> GeeksforGeeks Right </div> </div> <div class="col-4 float-left"> <div class="border p-2"> 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"> GeeksforGeeks 1 </div> </div> <div class="col-4 float-right"> <div class="border p-2"> GeeksforGeeks Right </div> </div> <div class="col-4 float-left"> <div class="border p-2"> GeeksforGeeks 2 </div> </div> </div> </div> </body> </html>
Producción:
Rejilla de canaletas CSS de imprimación
Ejemplo 2: El siguiente ejemplo muestra Primer CSS Gutters Grid utilizando clases de utilidad de relleno .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Gutters 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 Gutters Grid </h3> <br> <div class="container-lg clearfix mb-4"> <div class="col-4 float-left pr-3"> <div class="border color-bg-success"> GeeksforGeeks1 </div> </div> <div class="col-4 float-left px-3"> <div class="border color-bg-success"> GeeksforGeeks2 </div> </div> <div class="col-4 float-left px-3"> <div class="border color-bg-success"> GeeksforGeeks3 </div> </div> </div> <div class="container-lg clearfix"> <div class="col-2 float-left pr-3"> <div class="border color-bg-success"> GeeksforGeeks4 </div> </div> <div class="col-7 float-left pl-3"> <div class="border color-bg-success"> GeeksforGeeks5 </div> </div> <div class="col-3 float-left pl-3"> <div class="border color-bg-success"> GeeksforGeeks6 </div> </div> </div> </div> </body> </html>
Producción:
Rejilla de canaletas CSS de imprimación
Referencia: https://primer.style/css/utilities/grid#gutters
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA