Issue
I have a grid of squares like the dark on the left side of the image. My goal is it to "break" the row after some rows and stack the new line of rows side by side like the red ones:
.
If tried to limit the height of the grid-layout, but it didn't helped. The squares just went thru.
function createBlockGrid() {
for (let i = 0; i < BOARD_BLOCK_GRID_ROWS; i++) {
for (let j = 0; j < BOARD_BLOCK_GRID_COLUMNS; j++) {
const square = document.createElement('div');
square.classList.add(`square`);
square.setAttribute('id', `y${i}, x${j}`);
BOARD_BLOCKS.append(square);
}
}
}.square {
width: 16px;
height: 16px;
background-color: #1d1d1d;
box-shadow: 0 0 2px #000;
transition: 1s ease;
}
#blocks {
display: grid;
grid-template-columns: repeat(4, 20px);
grid-template-rows: repeat(63, 20px);
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Board</title>
<link rel="stylesheet" href="css/board.css">
</head>
<body>
<div class="left-side">
<div id="blocks"></div>
</div>
<!-- script src="js/board.js"></script -->
</body>Solution
I don't think what you want is possible with pure CSS... but since you're script-generating the blocks anyway, you could just put the ones you want to "overflow" into a separate container node while you're generating them:
const BOARD_BLOCK_GRID_ROWS = 8;
const BOARD_BLOCK_GRID_COLUMNS = 4;
const MAX_ROWS = 5;
const BOARD_BLOCKS = document.getElementById('blocks')
const BOARD_BLOCKS_OVERFLOW = document.getElementById('blocks-overflow')
function createBlockGrid() {
for (let i = 0; i < BOARD_BLOCK_GRID_ROWS; i++) {
for (let j = 0; j < BOARD_BLOCK_GRID_COLUMNS; j++) {
const square = document.createElement('div');
square.classList.add(`square`);
square.setAttribute('id', `y${i}, x${j}`);
let container = (i < MAX_ROWS) ? BOARD_BLOCKS : BOARD_BLOCKS_OVERFLOW;
container.append(square);
}
}
}
createBlockGrid().container {
display: flex
}
.square {
width: 16px;
height: 16px;
background-color: #1d1d1d;
box-shadow: 0 0 2px #000;
transition: 1s ease;
}
#blocks, #blocks-overflow {
display: grid;
grid-template-columns: repeat(4, 20px);
grid-template-rows: repeat(63, 20px);
}<div class="container">
<div class="left-side">
<div id="blocks"></div>
</div>
<div class="right-side">
<div id="blocks-overflow"></div>
</div>
</div>Answered By - Daniel Beck
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.