Rejilla de canaletas CSS de imprimación

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *