用 或 Grid 开发 2x2 排列其中每个

doreamon999

图像都显示相同的大小。但是，当我添加或删除图像时，使用 得到的结果并不是我想要的，因为最终图像会扩展以填充图形的整个宽度。通过将 Flexbox 更改为 Grid，每个项目都会与保持其大小的网格对齐。 左：使用 ，每个项目都会扩展以填充可用空间，因此最终项目的大小是其他项目的两倍。右：使用网格，元素与我的网格保持对齐，从而保持相同的大小。（大预览） 在印刷品中，经常会看到设计元素重叠以产生深度错觉。在网络上，实现这种效果非常棘手，因此设计元素大多保持独立。网格使过去很难甚至不可能实现的设计成为可能。 当屏幕足够大，可以并排渲染主要元素和图形元素时，我会应用 display: grid; 到主体元素的列宽与 6+4 复合网格相匹配，我在第 2 期中向您展示了。我还设置了列和行之间的间隙：粉碎杂志十三了！ 阅读时。

间 14 分钟 粉碎 在Twitter、  LinkedIn上分享 雷切尔·安德鲁 关于作者 Rachel Andrew 是一名网络开发人员、作家和演讲者。她是多本书的作者，包括《新 CSS 布局》。她是......更多关于雷切尔↬的人之一 电子邮件通讯 你的邮件 关于前端和用户体验的每周 Whatsapp 号码列表 提示。 受到超过 200,000 人的信赖。 《Smashing》杂志十三岁了！在这篇文章中，我分享了我们 Smashing 团队的一些故事。杂志、书籍和会议背后的人们。 本周，《Smashing》杂志迎来了十三岁生日。自 2006 年 Vitaly 发表第一篇文章以来，网络已经发生了很大变化。Smashing 的团队也发生了变化，我们为社区带来的东西也发生了变化——包括会议、书籍以及在线杂志中添加的会员资格。 有一点没有改变，那就是我们是一个小团队——我们中的大多数人都不是全职为 Smashing 工作。然而，团队中的。



许多人从早期就参与了该杂志的工作。您可能不知道他们的名字，但您会喜欢他们的工作并从他们的工作中受益。我很高兴了解每个人在 Smashing 之外都在做什么，以及他们是如何参与其中的——我希望你也能这么做。 当您想到《Smashing》杂志时，您可能会想到维塔利·弗里德曼（Vitaly Friedman） ，这是理所当然的。他于2006 年 9 月 2 日在该网站上发布了他的第一篇文章。当被问到除了 Smashing 之外他喜欢做什么时，他说， “我非常喜欢远足、跑步、熨烫和水果！对我来说，熨烫衬衫真的就像冥想——而且我也喜欢音乐节（这是大多数人不了解我的事情，因为我对此往往很模糊）。” Vitaly 曾经在 Smashing 做过几乎所有的事情——网络开发人员、作家、编辑、设计师、创意主管和策展人。这些天来，他帮助我们所有人走上他对所有 Smashing 事物。