Primer CSS es un marco CSS gratuito de código abierto que se crea con el sistema de diseño de GitHub para brindar soporte a la amplia gama de sitios web de Github. Crea 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 un modelo altamente reutilizable.
El sistema de cuadrícula Primer CSS funciona con varias utilidades de diseño para diferentes salidas. Muchas columnas se pueden ajustar a través de puntos de interrupción en un contenedor para obtener resultados receptivos.
Clase de grillas de bloque en línea Primer CSS:
- d-inline-block: esta clase se utiliza para establecer una cuadrícula de bloque en línea junto con las clases de ancho de columna de cuadrícula de Primer CSS .
Sintaxis:
<div>
<div class="d-inline-block border col-2">
...
</div>
<div class="d-inline-block border col-2">
...
</div>
</div>
Ejemplo 1: el siguiente código demuestra los anchos de columna utilizando la clase d-inline-block en el elemento HTML div .
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" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h4 class="font-bold">
Primer CSS Inline block Grid
</h4>
<br>
<div class="col-4 d-inline-block
border color-bg-subtle">
box 0
</div>
<div class="col-4 d-inline-block
border color-bg-subtle">
box 1
</div>
<div class="col-4 d-inline-block
border color-bg-subtle">
box 2
</div>
<div class="col-4 d-inline-block
border color-bg-subtle">
box 3
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra que el desarrollador puede usar anchos de columna y otras utilidades en los elementos de la lista HTML según las necesidades de la aplicación.
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" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h4 class="font-bold">
Primer CSS Inline block Grid on lists
</h4>
<br>
<ul class="list-style-none">
<li class="d-inline-block border col-2 p-2">
list 1
</li>
<li class="d-inline-block border col-2 p-2">
list 2
</li>
<li class="d-inline-block border col-2 p-2">
list 3
</li>
<li class="d-inline-block border col-2 p-2">
list 4
</li>
<li class="d-inline-block border col-2 p-2">
list 5
</li>
<li class="d-inline-block border col-2 p-2">
list 6
</li>
<li class="d-inline-block border col-2 p-2">
list 7
</li>
<li class="d-inline-block border col-2 p-2">
list 8
</li>
</ul>
</div>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/grid#inline-block-grids
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA