基本html和css帮助图片

有人知道如何让我的图片在每一列中排成4行吗？ 那么每个水平行4张图片？ 这里有一个例子

当我把它们放在不同的部分时，我也希望它们每行有4张图片，而不是2张。我不熟悉html和css，所以我只需要帮助

这是我的密码

过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

* {
框大小：边框框；
}
身体{
背景色：#f1f1；
填充：20px；
字体系列：Arial；
}
/*中心网站*/
梅因先生{
最大宽度：1000px；
保证金：自动；
文本对齐：居中；
垂直对齐：中间对齐；
线高：90px；
}
h1{
字体大小：50px；
单词break：打破一切；
}
.行{
利润率：10px-16px；
}
/*在每列之间添加填充*/
一行
.row>列{
填充：8px；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：33.33%；
显示：无；/*默认情况下隐藏所有元素*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
.btn:悬停{
背景色：#ddd；
}
.btn.active{
背景色：#666；
颜色：白色；
}

标题测试

标题测试
所有产品
测试2
测试3
测试4
测试5
测试6
测试7
山
Lorem ipsum dolor

灯
Lorem ipsum dolor

森林
Lorem ipsum dolor

复古的
Lorem ipsum dolor

快速的
Lorem ipsum dolor

经典
Lorem ipsum dolor

姑娘
Lorem ipsum dolor

人
Lorem ipsum dolor

女人
Lorem ipsum dolor

您的列为33%，4行需要为25%

body{
显示：网格；
网格模板列：50px 100px 100px 100px 100px 100px 100px 100px 100px 50px；
网格模板行：20px自动10px自动；
背景颜色：紫色；
}
p{
保证金：0；
填充：0；
}
.图片{
宽度：自动；
最小高度：200px；
背景颜色：蓝色
}
#菜单{
网格列开始：1；
网格柱端：-1；
网格行开始：2；
网格行端：3；
边距：0自动0自动；
背景色：透明；
}
menuButton先生{
文本对齐：居中；
保证金：2x2px 2px 2px；
填充：2×2×2×2×2×2；
背景色：白色；
颜色：黑色；
显示：内联块；
}
.menuButtonStart{
文本对齐：居中；
保证金：2x2px 2px 2px；
填充：2×2×2×2×2×2；
背景颜色：灰色；
颜色：白色；
显示：内联块；
}
#A1{
网格列开始：2；
网格柱端：3；
网格行开始：4；
网格行端：5；
}
#B1{
网格列开始：4；
网格柱端：5；
网格行开始：4；
网格行端：5；
}
#C1{
网格列开始：6；
网格柱端：7；
网格行开始：4；
网格行端：5；
}
#D1{
网格列开始：8；
网格柱端：9；
网格行开始：4；
网格行端：5；
}
#A2{
网格列开始：2；
网格柱端：3；
网格行开始：6；
网格行端：7；
}
#B2{
网格列开始：4；
网格柱端：5；
网格行开始：6；
网格行端：7；
}
#C2{
网格列开始：6；
网格柱端：7；
网格行开始：6；
网格行端：7；
}
#D2{
网格列开始：8；
网格柱端：9；
网格行开始：6；
网格行端：7；
}

添加描述

添加描述

添加描述

添加描述

添加描述

添加描述

添加描述

添加描述

我让4行工作，但你知道如何使它像这样展开吗？它很大吗？你试过把柱子放在中心吗<代码>文本对齐：居中