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 Nesting se utiliza para colocar la cuadrícula dentro de otra cuadrícula. Podemos poner cuadrículas infinitas dentro de las columnas porque el ancho de la columna está en porcentajes. En este artículo, discutiremos Primer CSS Grid Nesting.
Primer clases de anidamiento de cuadrícula CSS:
- col-*: Define el número de columnas hasta 12.
- float-left: esta clase se usa para hacer flotar el contenedor hacia la izquierda.
Sintaxis:
<div class="clearfix">
<div class="col-* float-left">
<div class="clearfix">
<div class="col-* float-left">
<div class="border">
...
</div>
</div>
</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra Primer CSS Grid Nesting.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Nesting </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 Nesting </h3> </div> <br> <br> <div class="clearfix"> <div class="col-4 float-left"> <div class="border"> GeeksforGeeks </div> </div> <div class="col-8 float-left"> <div class="clearfix"> <div class="col-12 float-left"> <div class="col-4 float-left"> <div class="border"> GFG Nested 1 </div> </div> <div class="col-4 float-left"> <div class="border"> GFG Nested 2 </div> </div> <div class="col-4 float-left"> <div class="border"> GFG Nested 3 </div> </div> </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS Grid Nesting
Ejemplo 2: El siguiente ejemplo demuestra Primer CSS Grid Nesting.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Grid Nesting </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 Nesting </h3> </div> <br> <br> <div class="clearfix"> <div class="col-4 float-left"> <div class="border"> GeeksforGeeks </div> </div> <div class="col-8 float-left"> <div class="clearfix"> <div class="col-12 float-left"> <div class="col-4 float-left"> <div class="border"> GFG Nested 1 </div> </div> <div class="col-4 float-left"> <div class="border"> GFG Nested 2 </div> </div> <div class="col-4 float-left"> <div class="border"> GFG Nested 3 </div> </div> </div> </div> </div> </div> <br> <div class="clearfix"> <div class="col-6 float-right"> <div class="border"> GeeksforGeeks </div> </div> <div class="col-6 float-right"> <div class="col-4 float-left"> <div class="border"> GFG Nest 1 </div> </div> <div class="col-8 float-left"> <div class="border"> GFG Nest 2 </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS Grid Nesting
Referencia: https://primer.style/css/utilities/grid#nesting
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA