Semantic UI es un CSS de código abiertobasado en less y jQuery que se usa para desarrollar interfaces web atractivas y receptivas. Tiene un amplio conjunto de elementos y módulos que ayudan a los desarrolladores a crear sitios web más rápido.
En este artículo, veremos los canalones de cuadrícula de interfaz de usuario semántica .
Los canalones son las áreas de espacios en blanco que separan las columnas en una cuadrícula. El tamaño de los canalones es constante independientemente del ancho de la cuadrícula o del número de columnas en una fila. El ancho de la cuadrícula se puede aumentar utilizando la cuadrícula relajada .
Clases de canales de cuadrícula de interfaz de usuario semántica:
- relajado: esta clase se usa en el contenedor de cuadrícula para aumentar el tamaño de las canaletas.
Sintaxis:
<div class="ui relaxed grid">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra el ejemplo básico de canaletas de rejilla .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI | Grid Gutters - Normal</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
.ui.grid{
margin-top: 25px;
}
/* Set to content box so that grid
gutters can be seen clearly */
.row.column .column{
background-clip: content-box;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui header green">GeeksforGeeks</h1>
<h3>Semantic UI | Grid Gutters - Normal</h3>
</div>
<div class="ui grid">
<div class="row four column">
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
</div>
<div class="row two column">
<div class="column green">16/2</div>
<div class="column green">16/2</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra los canalones de la rejilla en una rejilla relajada .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI | Grid Gutters - Relaxed</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
.ui.grid{
margin-top: 25px;
}
.row.column .column{
background-clip: content-box;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui header green">GeeksforGeeks</h1>
<h3>Semantic UI | Grid Gutters - Relaxed</h3>
</div>
<div class="ui grid relaxed">
<div class="row four column">
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
<div class="column pink">16/4</div>
</div>
<div class="row two column">
<div class="column green">16/2</div>
<div class="column green">16/2</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/collections/grid.html#gutters