CSS 具有动态高度的正方形网格?
CSS grid of squares with dynamic height?
完整示例在这里:https://codepen.io/ScottBeeson/pen/BmxLxL
$('#btnAddBox').on('click', function() {
$('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click', function() {
$('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
margin: 40px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100px;
display: grid;
grid-template-rows: 23px;
grid-auto-rows: 23px;
grid-template-columns: repeat(4, 23px);
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
.box {
background-color: #444;
color: #fff;
padding: 0px;
font-size: 100%;
}
#btnAddBox {
position: absolute;
top: 5px;
left: 105px;
cursor: pointer;
background-color: gray;
color: white;
padding: 4px;
}
#btnReset {
position: absolute;
top: 35px;
left: 105px;
cursor: pointer;
background-color: red;
color: white;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>
我正在使用 CSS 网格作为仪表板。可以添加和删除图块。现在我正在使用以下内容创建正方形网格:
grid-template-rows: repeat(30, 23px);
grid-template-columns: repeat(4, 23px);
这是有效的,但如果我添加或删除图块,包装器的高度不会相应调整。我该怎么做?
您可以使用 grid-auto-rows
。这不需要您像 grid-template-rows
那样预先指定行数。这使得它随着尺寸的不断增加而自动调整。
由于您的列是固定的,您可以使用 grid-template-columns
和 repeat(4)
。如果你想增加列,那么你可以使用 grid-auto-columns
.
以类似的方式实现它
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0; left: 0; width: 100px;
display: grid;
/* Added these */
grid-template-columns: repeat(4, 23px);
grid-auto-rows: 23px;
/* Added these */
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
$('#btnAddBox').on('click',function() {
$('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click',function() {
$('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
margin: 40px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0; left: 0; width: 100px;
display: grid;
grid-template-columns: repeat(4, 23px);
grid-auto-rows: 23px;
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
.box {
background-color: #444;
color: #fff;
padding: 0px;
font-size: 100%;
}
#btnAddBox {
position: absolute;
top: 5px; left: 105px;
cursor: pointer;
background-color: gray;
color: white;
padding: 4px;
}
#btnReset {
position: absolute;
top: 35px; left: 105px;
cursor: pointer;
background-color: red;
color: white;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>
完整示例在这里:https://codepen.io/ScottBeeson/pen/BmxLxL
$('#btnAddBox').on('click', function() {
$('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click', function() {
$('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
margin: 40px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100px;
display: grid;
grid-template-rows: 23px;
grid-auto-rows: 23px;
grid-template-columns: repeat(4, 23px);
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
.box {
background-color: #444;
color: #fff;
padding: 0px;
font-size: 100%;
}
#btnAddBox {
position: absolute;
top: 5px;
left: 105px;
cursor: pointer;
background-color: gray;
color: white;
padding: 4px;
}
#btnReset {
position: absolute;
top: 35px;
left: 105px;
cursor: pointer;
background-color: red;
color: white;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>
我正在使用 CSS 网格作为仪表板。可以添加和删除图块。现在我正在使用以下内容创建正方形网格:
grid-template-rows: repeat(30, 23px);
grid-template-columns: repeat(4, 23px);
这是有效的,但如果我添加或删除图块,包装器的高度不会相应调整。我该怎么做?
您可以使用 grid-auto-rows
。这不需要您像 grid-template-rows
那样预先指定行数。这使得它随着尺寸的不断增加而自动调整。
由于您的列是固定的,您可以使用 grid-template-columns
和 repeat(4)
。如果你想增加列,那么你可以使用 grid-auto-columns
.
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0; left: 0; width: 100px;
display: grid;
/* Added these */
grid-template-columns: repeat(4, 23px);
grid-auto-rows: 23px;
/* Added these */
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
$('#btnAddBox').on('click',function() {
$('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click',function() {
$('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})
body {
margin: 40px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
top: 0; left: 0; width: 100px;
display: grid;
grid-template-columns: repeat(4, 23px);
grid-auto-rows: 23px;
grid-gap: 2px;
background-color: #fff;
color: #444;
border: 1px solid blue;
}
.box {
background-color: #444;
color: #fff;
padding: 0px;
font-size: 100%;
}
#btnAddBox {
position: absolute;
top: 5px; left: 105px;
cursor: pointer;
background-color: gray;
color: white;
padding: 4px;
}
#btnReset {
position: absolute;
top: 35px; left: 105px;
cursor: pointer;
background-color: red;
color: white;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>