Html 我不知道如何在我的网站上创建响应性专栏？

我很难让这个网格响应。我有2行3列，每行有图片和文本。图片大小相同。我想让它具有响应性，所以当它达到一定宽度时，列会在彼此下方重新定位，字体大小会变小。谢谢你的帮助

图片：

.domov2{
宽度：100%；
填充：0px 0 50px 0；
背景色：#D5D7D7；
最小高度：450px；
}
多莫夫先生22{
宽度：80%；
最大宽度：960像素；
最小宽度：960像素；
溢出：隐藏；
保证金：0；
右边距：自动；
左边距：自动；
最小高度：450px；
}
.网格容器{
位置：相对位置；
柱间距：10%；
行间距：50px；
保证金：50px 0px 0px 0px；
/*右上角左下角*/
显示：网格；
网格模板列：23%24%23%；
网格模板行：300px 300px；
填充：10px；
文本对齐：对齐；
}
斯莱卡先生{
显示：块；
左边距：自动；
右边距：自动；
最大宽度：220px；
最小宽度：220px；
}
.中心{
显示：块；
左边距：自动；
右边距：自动；
}

Izdelamo vam vizualno atraktivno，urejeno spletno stran。

在乌雷耶诺斯普莱特诺斯特兰乔的普里夫纳夫诺斯特privlačno的Povečajte svojo prodajo。

搜索引擎优化。Vašo spletno stran optimiziramo tako，da bo dosegala visoke pozicije na“google”iskalniku。

Zastonj vzdrževanje（varnostno kopiranje的posodabljanje vtičnikov）是一位来自三个国家的总统。

Hitra，prijazna在odzivna podpora uporabnikom。

Nudimo brezplačno prvo svetovanje na daljavo。

让您自行决定是否进行移动适配。在css中，您可以看到添加的两个媒体查询

@media

。您可以根据自己的喜好设置大小调整数字。另外，我删除了

.domov22

中的

minwidth:960px

规则，因为该规则阻止块被制成“橡胶”。另外，我在

grid-template-columns:repeat（3，1fr）

上替换了您的网格-

模板列：23%24%23%

。如果您有任何问题，请联系

.domov2{
宽度：100%；
填充：0px 0 50px 0；
背景色：#D5D7D7；
最小高度：450px；}
多莫夫先生22{
宽度：80%；
最大宽度：960像素；
/*最小宽度：960像素*/
溢出：隐藏；
保证金：0；
右边距：自动；
左边距：自动；
最小高度：450px；}
.网格容器{
位置：相对位置；
柱间距：10%；
行间距：50px；
保证金：50px 0px 0px 0px；/*右上角/左上角*/
显示：网格；
/*网格模板列：23%24%23%*/
网格模板列：重复（3，1fr）；
网格模板行：300px 300px；
填充：10px；
文本对齐：对齐；}
斯莱卡先生{
显示：块；
左边距：自动；
右边距：自动；
最大宽度：220px；
最小宽度：220px；}
.中心{
显示：块；
左边距：自动；
右边距：自动；
}
@介质（最大宽度：950px）{
.网格容器{
网格模板列：重复（2，1fr）；
}
}
@介质（最大宽度：550px）{
.网格容器{
网格模板列：重复（1，1fr）；
}
}

Izdelamo vam vizualno atraktivno，urejeno spletno stran。


在乌雷耶诺斯普莱特诺斯特兰乔的普里夫纳夫诺斯特privlačno的Povečajte svojo prodajo。


搜索引擎优化。Vašo spletno stran optimiziramo tako，da bo dosegala visoke pozicije na“google”iskalniku。


Zastonj vzdrževanje（varnostno kopiranje的posodabljanje vtičnikov）是一位来自三个国家的总统。


Hitra，prijazna在odzivna podpora uporabnikom。


Nudimo brezplačno prvo svetovanje na daljavo。

参考：

您可以在不使用

@media

查询的情况下自动调整列的大小

这将根据屏幕大小调整列

显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；

.domov2{
宽度：100%；
填充：0px 0 50px 0；
背景色：#D5D7D7；
最小高度：450px；
}
多莫夫先生22{
宽度：80%；
最大宽度：960像素；
/*最小宽度：960像素*/
溢出：隐藏；
保证金：0；
右边距：自动；
左边距：自动；
最小高度：450px；
}
.网格容器{
位置：相对位置；
柱间距：10%；
行间距：50px；
保证金：50px 0px 0px 0px；
/*右上角左下角*/
显示：网格；
/*网格模板列：23%24%23%*/
网格模板列：重复（自动拟合，最小值（100px，1fr））；
网格模板行：300px 300px；
填充：10px；
文本对齐：对齐；
}
斯莱卡先生{
显示：块；
左边距：自动；
右边距：自动；
最大宽度：220px；
最小宽度：220px；
}
.中心{
显示：块；
左边距：自动；
右边距：自动；
}
@介质（最大宽度：950px）{
.网格容器{
网格模板列：重复（2，1fr）；
}
}
@介质（最大宽度：550px）{
.网格容器{
网格模板列：重复（1，1fr）；
}
}

Izdelamo vam vizualno atraktivno，urejeno spletno stran。

在乌雷耶诺斯普莱特诺斯特兰乔的普里夫纳夫诺斯特privlačno的Povečajte svojo prodajo。

搜索引擎优化。Vašo spletno stran optimiziramo tako，da bo dosegala visoke pozicije na“google”iskalniku。

Zastonj vzdrževanje（varnostno kopiranje的posodabljanje vtičnikov）是一位来自三个国家的总统。

Hitra，prijazna在odzivna podpora uporabnikom。

Nudimo brezplačno prvo svetovanje na daljavo。

使用

flex

进行响应，使用

mediaquerys

进行响应

字体

按照@Manjuboyz所说的做，并添加?