Html 使网格上方的元素与网格宽度相同

我希望网格上方的搜索输入与网格大小相同。当您最初在分辨率足够大的设备上加载时，它们看起来是一样的，但是当您开始缩小浏览器视口，使每行只能容纳一张卡时，网格会变小，但是，上面包含搜索输入的div不会变小。我想让search div成为被动的，这样它就可以为分辨率较小的用户调整大小

也许有一些方法可以把它放到网格中，我只是不知道怎么做

我创建了以下代码笔作为示例：

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景:#1楼;；
}
.内容{
显示器：flex；
弯曲方向：立柱；
身高：100%；
证明内容：中心；
最大宽度：920px；
利润率：20px 20px；
}
.电网{
显示：网格；
身高：100%；
证明内容：中心；
网格模板列：重复（自动填充，最小值（450px，450px））；
栅隙：20px；
网格模板行：自动；
}
.搜索{
宽度：100%；
边缘底部：40px；
网格区域：自动/自动；
}
.搜索输入{
宽度：100%；
}
.项目{
宽度：100%；
高度：300px；
背景：#bfbf；
}

卡1
卡2
卡片3
卡4

您可以将网格卡的大小设置为“宽度”，并将大小设置为上述div

下面是下面的javascript

<script>
   //Get one card from the grid
   var card1 = document.getElementsByClassName('item')[0];
   //Get width of this card
   var card1Width = card1.offsetWidth;
    //Get your search div
    var searchDiv = document.getElementsByClassName('searchDiv')[0];
    //set the card's width on search div
     searchDiv.style.width = card1Width+"px";   
</script>

//从网格中获取一张卡
var card1=document.getElementsByClassName（'item'）[0]；
//获取这张卡的宽度
var card1Width=card1.offsetWidth；
//找到你的搜索部门
var searchDiv=document.getElementsByClassName（'searchDiv'）[0]；
//在搜索div上设置卡片的宽度
searchDiv.style.width=card1Width+“px”；

我认为只要对代码进行一些修改，就可以使布局正常工作：

• 在flex容器中从

  列

  切换到

  行换行

• 将搜索栏和网格都设置为容器的100%宽度

.content{
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
高度：100vh；
填充：20px；
}
.搜索{
弹性：0.100%；
最小宽度：450px；
边缘底部：40px；
}
.搜索输入{
宽度：100%；
}
.电网{
弹性：1；
显示：网格；
网格模板列：重复（自动拟合，最小值（450px，1fr））；
网格自动行：300px；
栅隙：20px；
}
.项目{
背景：#bfbf；
}
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景:#1楼;；
}

卡1
卡2
卡片3
卡4

您的代码几乎正确，但几乎没有遗漏什么。使用

框大小：边框框带有
.content
类属性
边距：20px 20px它将在较小的设备中产生问题<代码>内容
应为
页边距：0自动和
填充：20px 15px。使用网格模板列：重复（自动填充，最小值（450px，450px））。如果设备大小小于
450px
您将看到水平滚动条，则它不适用于较小的设备。您可以使用
@media
重写
网格
属性。下面我将在代码段中修改您的
css
属性和
HTML


*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
背景:#1楼;；
保证金：0；
填充：0；
}
.内容{
显示器：flex；
弯曲方向：立柱；
/*高度：100%；*//*您不需要在此处使用高度100%。它没有任何效果*/
最小高度：100vh；
证明内容：中心；
最大宽度：920px；
保证金：0自动；
填充：20px 15px；
宽度：100%；
}
.电网{
显示：网格；
/*身高：100%*/
网格模板列：重复（2，1fr）；
栅隙：20px；
}
@介质（最大宽度：767px）{
.电网{
网格模板列：100%；
}
}
.搜索{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
边缘底部：40px；
/*网格区域：自动/自动*/
}
.搜索输入{
高度：40px；
背景色：白色；
边框：1px实心rgba（0,0,0,0.15）；
边界半径：4px；
填充：6px 12px；
宽度：100%；
}
@介质（最大宽度：767px）{
.搜索输入{
最大宽度：450像素；
左边距：自动；
右边距：自动；
}
}
.项目{
宽度：100%；
高度：300px；
背景：#bfbf；
最大宽度：450像素；
左边距：自动；
右边距：自动；
}

卡1
卡2
卡片3
卡4
我希望网格上方的搜索输入与网格大小相同这实际上是您的代码所做的，我不理解这里的最终结果，如果您希望在每行只有一个更改为
minmax（450px，1fr）时项目与搜索大小相同
您可以将网格模板列的值重置为网格模板列：重复（自动填充，最小值（350px，1fr））
因此它更适合屏幕，同时尝试使用严格的CSS处理此问题。这里不需要JS。