La interfaz de usuario semántica es un marco de interfaz de usuario basado en el preprocesador CSS menos y jQuery . Se utiliza para crear experiencias web hermosas y receptivas utilizando los elementos y módulos que vienen incluidos.
Las cuadrículas de la interfaz de usuario semántica se dividen en unidades horizontales que se conocen como columnas. Cada fila de una cuadrícula tiene una cantidad fija de columnas. De forma predeterminada, Semantic UI sigue un sistema de 16 columnas, es decir, cada fila de una cuadrícula se divide en 16 unidades y cada columna puede especificar el número de unidades que ocupa. Por ejemplo, 5 columnas de tres anchos pueden caber en una fila ya que 16 dividido por 3 es 5.
Clases de columnas de cuadrícula de interfaz de usuario semántica:
- columna de dos anchos: especifica una columna que ocupa 2 unidades de ancho de 16.
- columna de tres anchos: especifica una columna que ocupa un ancho de 3 unidades de 16.
- columna de cuatro anchos: especifica una columna que ocupa 4 unidades de ancho de 16.
- columna de cinco anchos: especifica una columna que ocupa 5 unidades de ancho de 16.
- columna de seis anchos: Especifica una columna que ocupa un ancho de 6 unidades de 16.
- columna de siete anchos: Especifica una columna que ocupa un ancho de 7 unidades de 16.
- columna de ocho anchos: especifica una columna que ocupa 8 unidades de ancho de 16.
- columna de nueve anchos: especifica una columna que ocupa un ancho de 9 unidades de 16.
- columna de diez anchos: especifica una columna que ocupa 10 unidades de ancho de 16.
- columna de once anchos: Especifica una columna que ocupa 11 unidades de ancho de 16.
- columna de doce anchos: especifica una columna que ocupa 12 unidades de ancho de 16.
- trece columnas de ancho: Especifica una columna que ocupa 13 unidades de ancho de 16.
- columna de catorce anchos: especifica una columna que ocupa 14 unidades de ancho de 16.
- columna de quince anchos: Especifica una columna que ocupa 15 unidades de ancho de 16.
- columna de dieciséis anchos: Especifica una columna que ocupa 16 unidades de ancho de 16.
Sintaxis:
<div class="ui grid"> <div class="eight wide column"></div> <div class="nine wide column"></div> </div>
Ejemplo: El siguiente ejemplo ilustra el uso de clases de columna en Semantic UI Grid.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Grid Columns</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>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 25px;
}
.ui.grid .column {
background-clip: content-box;
height: 100px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
Semantic UI - Grid Columns
</h3>
</div>
<div class="ui grid">
<div class="four wide column">
four wide column
</div>
<div class="eight wide column">
eight wide column
</div>
<div class="four wide column">
four wide column
</div>
<div class="six wide column">
six wide column
</div>
<div class="ten wide column">
ten wide column
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: columnas de cuadrícula
Referencia: https://semantic-ui.com/collections/grid.html#columns