我希望网格上方的搜索输入与网格大小相同。当您最初在分辨率足够大的设备上加载它时,它们看起来是一样的,但是当您开始缩小浏览器视口,以便每行只适合一张卡片时,网格会变小,但是,上面的 div包含搜索输入不包含。我想让搜索 div 具有反应性,以便它可以为分辨率较小的用户调整大小。
也许有某种方法可以实际放入网格中,我只是不知道该怎么做。
我创建了以下 codepen 作为示例:
https://codepen.io/latchkostov/pen/vYOVjjo
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
}
.content {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
max-width: 920px;
margin: 20px 20px;
}
.grid {
display: grid;
height: 100%;
justify-content: center;
grid-template-columns: repeat(auto-fill, minmax(450px, 450px));
grid-gap: 20px;
grid-template-rows: auto;
}
.search {
width: 100%;
margin-bottom: 40px;
grid-area: auto / auto;
}
.search-input {
width: 100%;
}
.item {
width: 100%;
height: 300px;
background: #bfbfbf;
}
<div class="content">
<div class="search">
<input type="text" placeholder="search" class="search-input" />
</div>
<div class="grid">
<div class="item">Card 1</div>
<div class="item">Card 2</div>
<div class="item">Card 3</div>
<div class="item">Card 4</div>
</div>
</div>
海绵宝宝撒
眼眸繁星
富国沪深
相关分类