calc_Calc（）网格是最好的网格-优快云博客

calc

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

网格系统

你好我叫科里。我有点痴迷。多年以来，我一直沉迷于网格系统。实际上，我曾帮助制作了一个颇受欢迎的Jeet 。我一直很喜欢正确地安排事物所涉及的数学。

我想我们都可以同意，固定网格已经取代了恐龙，成为了流体网格，但总有一些事情困扰着我。例如，无法在顶部和底部设置与左侧和右侧的装订线大小相同的装订线。认真尝试。

在没有传递某种上下文和间隔的情况下，无法无限嵌套。例如，在Jeet中，您必须键入column(1/3 1/2) ，其中1/2是包含元素的大小。当您嵌套三到四次并且您的声明看起来像column(1/4 1/3 1/2 1/2)时，这变得非常毛茸茸。 uck 不仅仅是Jeet，每个基于预处理器的网格系统都存在此问题。

和引导程序？不要仅仅为了使网格系统正常工作就让您了解在标记中需要增加多少元素，否则就容易出错。或者，如果您要在元素上设置背景颜色，则您需要在标记中包含更多元素的事实。这是一个以画廊形式出现的小问题的例子。

啊！甚至Flexbox似乎也没有提供其他任何东西，除了垂直放置事物的便捷方式。

在绕过今天的网格出问题的旋风之旅之后，网格痴迷者应该做什么？

Calc（）？

我们可以在CSS中使用calc() ，那么它有什么作用？

“使用calc（），您可以执行计算以确定CSS属性值。” -MDN

不仅如此，我们还可以将单位与calc 结合！这意味着，如果我们希望网格每行有四列，并且它们之间有20px的装订线，则可以编写百分比和像素值的组合，例如width: calc(25% - 20px) 。那有多神奇？

例

这是一些标记-包含section的七个小猫图像：

<section>
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
  <img src="http://placekitten.com/404/303">
</section>

然后，我们对图像应用一些样式：

img {
  float: left;
  width: calc(25% - 20px);
  margin: 10px;
}

这样可以确保每张图片的宽度恰好是其父图片宽度的25％，减去20像素即可允许我们左右左右的装订线。四周留出10像素的边距，即可将图像完美地置于“列”的中心。

请注意顶部和底部的间距与左侧和右侧的间距如何相同？美丽。

表达另一种方式

对于那些宁愿以其他方式显示计算结果的人来说，我们可以将其抽象一些： width: calc(100% * 1/4 - 20px);

同样，这为我们提供了四个具有20px装订线的完美列。我们还可以使用媒体查询来根据视口宽度更改列数：

img {
  float: left;
  margin: 10px;
  width: calc(100% * 1 / 4 - 20px);
}
@media (max-width: 900px) {
  img {
    width: calc(100% * 1 / 3 - 20px);
  }
}
@media (max-width: 600px) {
  img {
    width: calc(100% * 1 / 2 - 20px);
  }
}
@media (max-width: 400px) {
  img {
    width: calc(100% - 20px);
  }
}

这个美丽的小CSS规则彻底消除了多年的困扰。告别网格系统。你好，Calc。