Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.
Los estilos Primer CSS Gutter agregan relleno al lado izquierdo y derecho de cada columna de diseños y aplican un margen negativo al contenedor para que el contenido dentro de cada columna se alinee con el contenido fuera de la cuadrícula. Column Gutter ayuda a establecer el espacio (gutter) entre las columnas de diseño de elementos, es decir, entre el diseño principal y el diseño de la barra lateral. En este artículo, aprenderemos sobre Primer CSS Layout Column Gutter.
Primer CSS Layout Column Gutter Clases utilizadas:
- predeterminado: esta no es una clase, pero para crear un medianil de columna predeterminado, el espacio es (md: 16px, lg: 24px) entre el componente principal y la barra lateral.
- Layout–gutter-none: esta clase se usa para agregar un espacio de 0px entre el componente principal del diseño y la barra lateral.
- Layout-gutter-condensed: esta clase se usa para agregar un espacio de 16 px entre el componente principal del diseño y la barra lateral.
- Layout–gutter-spacious: esta clase se usa para agregar un espacio de (md: 16px, lg: 32px, xl: 40px) entre el componente principal del diseño y la barra lateral.
Sintaxis:
<div class="Layout Layout--gutter-none">
<div class="Layout-main border">
...
</div>
<div class="Layout-sidebar border">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra el medianil de columna predeterminado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Layout Column Gutter</h2> </div> <div class="Layout m-4"> <div class="Layout-main border color-bg-success p-2"> Jobs </div> <div class="Layout-sidebar border color-bg-accent p-2"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la columna medianil none utilizando la clase Layout–gutter-none .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet"/> </head> <body> <div class="m-4"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Primer CSS Layout Column Gutter</h2> </div> <div class="Layout Layout--gutter-none m-4"> <div class="Layout-main border color-bg-success p-2"> Tutorials </div> <div class="Layout-sidebar border color-bg-accent p-2"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 3: El siguiente ejemplo muestra la canaleta de columna condensada usando la clase Layout–gutter-condensed .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Layout Column Gutter</h2> </div> <div class="Layout Layout--gutter-condensed m-4"> <div class="Layout-main border color-bg-success p-2"> Premium </div> <div class="Layout-sidebar border color-bg-accent p-2"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Ejemplo 4: El siguiente ejemplo muestra la columna canalón espacioso usando la clase Layout–gutter-spacious .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="m-4"> <h1 style="color:green">GeeksforGeeks</h1> <h2>Primer CSS Layout Column Gutter</h2> </div> <div class="Layout Layout--gutter-spacious m-4"> <div class="Layout-main border color-bg-success p-2"> Jobs </div> <div class="Layout-sidebar border color-bg-accent p-2"> GeeksforGeeks </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/layout#column-gutter
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA