36 lines
791 B
CSS
36 lines
791 B
CSS
|
body {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--grid-size: 16; /* Adjust this value for grid size (e.g., 3 for 3x3) */
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vh; /* Keep the grid square */
|
||
|
|
max-width: 100vh;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(calc(var(--grid-size) + 2), 1fr);
|
||
|
|
grid-template-rows: repeat(calc(var(--grid-size) + 2), 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
font-size: calc(0.5vw + 0.5vh); /* Adjust font size for better visibility */
|
||
|
|
}
|
||
|
|
|
||
|
|
.cell {
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
}
|