Skip to content

Instantly share code, notes, and snippets.

@kurotori

kurotori/Notas.md

Created June 3, 2025 11:25
Show Gist options
  • Save kurotori/35f5bff5311675305f8c438fc4499f2e to your computer and use it in GitHub Desktop.
Save kurotori/35f5bff5311675305f8c438fc4499f2e to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo de diseño con Clases utilitarias
Raw
estilo.css
body,html{
width: 100%;
height: 100%;
border: 0px;
}
.fila{
position: relative;
width: 100%;
}
.columna{
position: relative;
height: 100%;
float: left;
}
.esCuadrado{
aspect-ratio: 1 / 1;
}
.ancho_1_3{
width: calc( 100% / 3 );
}
.altura_1_3{
height: calc( 100% / 3 );
}
/*
.borde_1px_negro{
border: 1px solid black;
left: -1px;
top: -1px;
}
*/
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="columna esCuadrado ">
<div class="fila altura_1_3">
<div class="columna esCuadrado"><div class="columna ancho_1_3 "></div>
<div class="columna ancho_1_3 "></div>
<div class="columna ancho_1_3 "></div>
</div>
</div>
<div class="fila altura_1_3 "></div>
<div class="fila altura_1_3 "></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment