覆盖默认样式以居中 Avada 投资组合网格

Question

我正在此处寻找一些高级 CSS 帮助，以便将位于此页面上的作品集项目居中 [https://elysewalkerinteriors.com/interior-design-oakville/][1]

如您所见，它们似乎都向左倾斜。底层

<article>

（组合项目）全部绝对定位，父容器设置为

position: relative

。

我必须添加一个自定义样式，使每列宽度为 32%（33% 导致列布局从 3 列中断为 2 列，在右侧留下一个大的白色间隙）。

我很好奇如何处理这种情况并将投资组合项目集中在页面上。

谢谢你 [1]：https://elysewalkerinteriors.com/interior-design-oakville/#:~:text=Check%20Out%20Some%20Of%20Our%20Latest%20Designs

Answer 1

CSS 网格：

CSS网格是使用display属性的网格值定义的；您可以使用 grid-template-rows 和 grid-template-columns 属性定义网格上的列和行。

section {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

article {
  background: red;
}

<section>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
  <article><p>Test</p></article>
</section>