html – 给定容器中的项目网格,如何处理导致项目溢出的边距？

概述我有一个宽608像素的容器,我的设计要求每行有3个项目.每个项目是192px.并且只有行中的前两项具有16px的边距权限. 问题是CSS正在为所有项目添加16px的边距权限. 如何更新代码以使其每行3个项目,其中每行的第1个和第2个项目具有边距右边距？ 我有一个hacky版本工作,我在右边缘和边缘左边8px,然后在容器上添加负-8px边距,但感觉很hacky,我很好奇,如果有一个更优雅的方式来实现 我有一个宽608像素的容器,我的设计要求每行有3个项目.每个项目是192px.并且只有行中的前两项具有16px的边距权限.

问题是CSS正在为所有项目添加16px的边距权限.

如何更新代码以使其每行3个项目,其中每行的第1个和第2个项目具有边距右边距？

我有一个Hacky版本工作,我在右边缘和边缘左边8px,然后在容器上添加负-8px边距,但感觉很Hacky,我很好奇,如果有一个更优雅的方式来实现这一点CSS3.

.container {  wIDth: 608px;  min-wIDth: 608px;  max-wIDth: 608px;  background: #efefef;  display: flex;  flex-wrap: wrap;}.item {  wIDth: 192px;  min-wIDth: 192px;  max-wIDth: 192px;  margin: 0 16px 16px 0;  border: 1px solID #ccc;  Box-sizing: border-Box;}

<div >  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div></div>

解决方法 这是CSS网格解决方案,您可以轻松控制元素之间的差距,您也不需要为它们明确指定宽度：

.container {  wIDth: 608px;  display:grID;  grID-template-columns:repeat(3,1fr);  grID-column-gap:16px;  background: #efefef;}.item {  border: 1px solID #ccc;  Box-sizing: border-Box;}

<div >  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div>  <div >Item</div></div>

总结

以上是内存溢出为你收集整理的html – 给定容器中的项目网格,如何处理导致项目溢出的边距？全部内容，希望文章能够帮你解决html – 给定容器中的项目网格,如何处理导致项目溢出的边距？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。