La clase Spectre Gapless Flexbox Grid se usa para crear un flexbox para eliminar el espacio entre los cuadros. La cuadrícula Spectre tiene habilitado el flexbox multilínea. Puede agregar la clase col-oneline a las columnas para hacer que todas sus columnas secundarias se coloquen en la misma fila. Para crear un gapless, necesitamos agregar la clase col-gapless a las columnas para tener columnas sin espacios.
Clase de cuadrícula Spectre Gapless Flexbox:
- col-gapless: esta clase se usa para eliminar el espacio entre las cajas flexibles.
- col-oneline: esta clase hace que todas sus columnas secundarias se coloquen en la misma fila.
Nota: Esta clase col-oneline se usa para hacer todas las columnas en una sola fila.
Sintaxis:
<div class="columns col-gapless">
<div class="column col-*">
....
</div>
....
</div>
Ejemplo 1: El siguiente ejemplo ilustra la rejilla Spectre Gapless Flexbox.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Spectre Gapless Flexbox Grid</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Gapless Flexbox Grid</strong>
<br><br>
</center>
<strong>Spectre Gapless: col-gapless</strong>
<div class="columns col-gapless">
<div class="column col-6 bg-success">
Geeksforgeeks
</div>
<div class="column col-6 bg-primary">
Spectre CSS
</div>
</div>
<br>
<div class="columns col-gapless">
<div class="column col-8 bg-error">
A Computer Science Portal for Geeks
</div>
<div class="column col-4 bg-warning">
Geeksforgeeks
</div>
</div>
</body>
</html>
Producción:
Rejilla Spectre Gapless Flexbox
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Spectre Gapless Flexbox Grid</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Spectre Gapless Flexbox Grid</strong>
<br><br>
</center>
<strong>Spectre Gapless: col-oneline</strong>
<div class="columns col-oneline">
<div class="column col-8 bg-success">
Geeksforgeeks
</div>
<div class="column col-6 bg-primary">
Spectre CSS
</div>
</div>
</body>
</html>
Producción:
Rejilla Spectre Gapless Flexbox
Enlace de referencia: https://picturepan2.github.io/spectre/layout/grid.html#grid-gapless
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA