css-debug
Version:
A tool for debugging CSS and HTML boxes
68 lines (57 loc) • 2.17 kB
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">
<title>Test SCSS</title>
<link rel="stylesheet" href="../css/debug.css">
<link rel="stylesheet" href="css/style.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(0, 0, 0);
display: flex;
justify-content: center;
margin-top: 60px;
}
.caja {
width: 200px;
height: 200px;
}
.container {
/* width: 850px; */
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto;
padding: 10px;
column-gap: 10px;
row-gap: 10px;
}
</style>
</head>
<body>
<div class="container debug debug-no-bg" >
<div class="debug-orange debug-red--hover no-bg grid-item caja" style="--outline-size: 3px;"></div>
<div class="debug grid-item caja">soy una caja</div>
<div class="debug-lightcyan grid-item caja"></div>
<div class="debug-orange grid-item caja"></div>
<div class="debug-deepskyblue debug-red--hover grid-item caja"></div>
<div class="debug-brown grid-item caja"></div>
<div class="debug-gray grid-item caja"></div>
<div class="debug-white grid-item caja"></div>
<div class="debug-cornflowerblue grid-item caja"></div>
<div class="debug-darkblue grid-item caja"></div>
<div class="debug-cyan grid-item caja"></div>
<div class="debug-darkgoldenrod grid-item caja"></div>
<div class="debug-salmon grid-item caja"></div>
<div class="debug-deepskyblue grid-item caja"></div>
<div class="debug-gainsboro grid-item caja"></div>
<div class="debug-hotpink grid-item caja"></div>
</div>
<!-- Create grid of div of 10x10 -->
</body>
</html>