子块和父边界（网格布局）

Question

为什么子块(块)超出父块的边界(child_block)? 我希望子块自动换行

如何实现截图中的结果：

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
            
for(let i = 0; i < 50; i++){
let xep = document.createElement('div'); 
child_block.prepend(xep);
xep.className = 'block';
xep.innerHTML = 'Xopa'
}

.main_block{
display:grid;
grid-template-columns: 100%; 
padding:10px;
margin:50px;
border:1px solid black;
}

.child_block{
display:grid;
grid-auto-flow: column;
}

.block{
display: inline-block;  
border:1px solid black;
font-size:18px;
padding:10px;
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>

Answer 1

你也可以将它与 flex 一起使用

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
            
for(let i = 0; i < 50; i++){
let xep = document.createElement('div'); 
child_block.prepend(xep);
xep.className = 'block';
xep.innerHTML = 'Xopa'
}

.main_block{
display:grid;
grid-template-columns: 100%; 
padding:10px;
margin:50px;
border:1px solid black;
}

.child_block{
display:flex;
flex-wrap: wrap;
}

.block{
display: inline-block;  
border:1px solid black;
font-size:18px;
padding:10px;
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>

grid

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
            
for(let i = 0; i < 50; i++){
let xep = document.createElement('div'); 
child_block.prepend(xep);
xep.className = 'block';
xep.innerHTML = 'Xopa'
}

.main_block{
display:grid;
grid-template-columns: 100%; 
padding:10px;
margin:50px;
border:1px solid black;
}

.child_block{
display:grid;
grid-template-columns: repeat(auto-fill,minmax(50px,1fr));
}

.block{
display: inline-block;  
border:1px solid black;
font-size:18px;
padding:10px;
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>

Answer 2

有了您添加到块元素中的 inline-block，您甚至不需要使用任何网格布局。

let main = document.querySelector('.main_block');
let child_block = document.querySelector('.child_block');
            
for(let i = 0; i < 50; i++){
let xep = document.createElement('div'); 
child_block.prepend(xep);
xep.className = 'block';
xep.innerHTML = 'Xopa'
}

.main_block{
padding:10px;
margin:50px;
border:1px solid black;
}

.block{
display: inline-block;
border:1px solid black;
font-size:18px;
padding:10px;
}

<div class = "main_block">

<div class = "child_block">


</div>

</div>

子块和父边界（网格布局）

Child blocks and parent borders(Grid-Layout)

javascript

html

css

css-grid