农民约翰是一个惊人的会计_我的朋友约翰在CSS Grid中犯了一个错误。不要像约翰-这样做。

农民约翰是一个惊人的会计

It had been two years and John had no job.

已经两年了，约翰没有工作。

John was a smart 20-something guy. Okay, he had a job — but it wasn’t one he liked. It was too monotonous and was not nearly creative enough. His day job only bored the hell out of him.

约翰是个聪明的20多岁的家伙。好的，他有一份工作-但这不是他喜欢的工作。这太单调了，还不够有创意。他的日常工作只会使他无聊。

求职 (The Job Search)

For John, it felt as though it wasn’t difficult to learn to code. He taught himself to code, and started looking for the opportunity to leave his boring job — finally.

对于John来说，感觉好像并不难学习编码。他自学了编码，并开始寻找机会离开无聊的工作-终于。

After a month of futile job searching, he got a call from Sharon.

经过一个月的徒劳寻找工作，他接到了沙龙的电话。

Sharon was the recruiter for youknowho Inc, an AI startup in the valley.

沙龙曾是位于山谷的AI初创公司youknowho Inc的招聘人员。

With a lot of enthusiasm, John blazed through all the hiring process. Guess what the interesting part was?

约翰满怀热情地完成了整个招聘过程。猜猜有趣的部分是什么？

That call from Sharon.

沙龙的那个电话。

She asked a couple questions on his background, and John couldn’t wait to share his boring, monotonous typical work day with her.

她问了几个有关他的背景的问题，约翰迫不及待地想与她分享他无聊，单调的典型工作日。

He tried to tell himself that it didn’t matter if he got the Job. At least, those were the words he muttered as the call ended. “I just had to share how I really felt about my current Job,” he said.

他试图告诉自己，是否得到这份工作并不重要。至少这些是通话结束时他喃喃自语的话。 “我只是分享如何我真的觉得对我现在的工作，”他说。

Weeks went by, and it felt like a dream when got himself a job as a junior frontend developer.

几周过去了，当自己担任初级前端开发人员的工作时，这就像一个梦。

And that’s where the story begins.

这就是故事的开始。

John遇到Khalid和CSS网格 (John meets Khalid and the CSS Grid)

Khalid wasn't a DJ.

哈立德不是DJ。

If he were, then all he mixed was clean code, and not songs.

如果他是，那么他所混合的只是干净的代码，而不是歌曲。

If you wanted to ruin a nice afterparty, then have Khalid be your DJ. You’d get nothing short of a complete mess.

如果您想破坏一场美好的派对，那么请让哈立德(Khalid)做您的DJ。您将一团糟。

Khalid wasn't a big fan of songs anyway, but who needs to love music when you’re tech lead at a thriving Startup in the Valley?

无论如何，哈立德(Khalid)都不是歌迷，但是当你在硅谷蓬勃发展的创业公司担任技术主管时，谁会喜欢音乐？

As tech lead, Khalid was responsible for the entire development team. This meant more than just dealing with technical issues — it also meant he had to deal with people from different backgrounds.

作为技术主管，Khalid负责整个开发团队。这不仅意味着要处理技术问题，还意味着他必须与来自不同背景的人打交道。

And that’s a darn hard thing to suceed at. But Khalid excelled not just at being a great technical leader. He had an impeccable relationship with the development team.

这是一件很难的事情。但是Khalid不仅擅长成为一名出色的技术领导者。他与开发团队有着无可挑剔的关系。

It wasn't a surprise that the two got talking almost immediately. Who wouldn't love John?

这两个人几乎立即开始交谈并不奇怪。谁会不爱约翰？

His broad smiles were enough to light up a tunnel. He just smiled always. Who does that!

他灿烂的笑容足以照亮隧道。他只是一直微笑。谁做的！

回到办公室 (Back at the office)

Everyone was ready for work.

每个人都准备工作。

John entered with a cup of coffee. It was morning, and the office had just started to buzz.

约翰带着一杯咖啡进来了。那天早上，办公室刚开始嗡嗡作响。

Good Monday morning, eh?

星期一早上好，是吗？

“So, John it is nice to have you join the development team. Was wondering if you were ready to take on a new task today?” asked Khalid

“所以，约翰，很高兴您加入开发团队。想知道您今天是否准备好承担一项新任务？” 哈立德问

“Hey, boss. I was born ready! ”

“嘿，老板。我天生就准备好了！ ”

That’s John for you. He was born ready — indeed. Happy dude.

那是约翰给你的。他天生就准备好了-的确如此。老兄

“Umm, I need you to set up a new landing page for our new product. And we want it written with the CSS Grid. Ever heard of it?”

“嗯，我需要您为我们的新产品设置一个新的登录页面。我们希望它使用CSS Grid编写。听说过吗？”

“Oh yes I have,” John said quickly.

“哦，是的，”约翰Swift说道。

学习CSS网格 (Learning the CSS Grid)

John had no idea what the CSS Grid was.

John不知道CSS网格是什么。

The only reason he said yes was that he didn't want to look stupid in front of Khalid.

他唯一同意的理由是，他不想在哈立德面前显得愚蠢。

He searched on Medium and found great CSS Grid articles. He read to his heart’s content, and started working on the layout.

他在Medium上搜索，找到了很棒CSS Grid文章。他认真阅读了内容，并开始进行版式设计。

约翰建立的布局 (The layout John built)

John had a lot of experience with Bootstrap.

约翰在Bootstrap上有很多经验。

He was quite familiar with the concept of a 12-column grid. So, with the CSS Grid, the first thing he did was set up a 12 column grid like so:

他对12列网格的概念非常熟悉。因此，对于CSS网格，他所做的第一件事是建立一个12列网格，如下所示：

grid-template-columns: repeat(12, 1fr)

“Haha, that was easy,” he thought to himself.

“哈哈，那很容易，”他自言自语。

In fact, John did this for every side project he worked on while learning the CSS Grid.

实际上，John在学习CSS网格时为他从事的每个副项目都做了此工作。

John enjoyed working with the CSS Grid, and he thought it was fun.

John喜欢使用CSS Grid，他认为这很有趣。

He made a few mistakes, and some stuff didn't work as he expected, but he was able to quickly fix the issues.

他犯了一些错误，有些东西没有达到他的预期，但是他能够Swift解决问题。

He knew how to Google things. In this day and age, everyone should.

他知道如何Google的东西。在这个时代，每个人都应该。

与哈立德的会面 (The meeting with Khalid)

“I’ve got it working now, Boss.”

“我现在已经开始工作了，老板。”

Khalid was excited to see John. They chatted about his experience building the layout, and Khalid went on to take a look at the code.

哈立德很高兴见到约翰。他们聊起了他构建布局的经验，然后Khalid继续看了一下代码。

Well, every layout built with the CSS Grid pretty much begins with the grid definition. So, that was where Khalid looked first.

嗯，使用CSS Grid构建的每个布局几乎都始于网格定义。因此，这就是Khalid的第一眼。

“Oh, man. There’s something not right here.”

“天啊。这里有些不对劲。”

为什么创建12列？ (Why did you create 12 columns?)

And Khalid began his lecture …

哈立德开始他的演讲……

12 column grids are popular in web design today. But the idea behind the CSS Grid is to create the number of columns you need without bloating the layout with columns you don’t really need.

12个列网格在当今的网页设计中很流行。但是CSS网格背后的想法是创建所需的列数，而不会用不需要的列来使布局膨胀。

The CSS Grid layout forces you to think about layouts in CSS a little differently than we’ve done for over 20 years.

CSS网格布局迫使您对CSS布局的思考与我们20多年来所做的稍有不同。

It is a game changer, one that includes a lot of unlearning.

它是一个改变游戏规则的人，其中包括很多未学习的知识。

“A neater approach would have been to create the 2 or 3 columns you needed and just get on with the design,” said Khalid.

Khalid说：“更巧妙的方法是创建所需的2或3列，然后继续进行设计。”

“There’s no harm in redefining the number of columns within the media query too. Makes it perfect for responsive design.”

“重新定义媒体查询中的列数也没有害处。使其非常适合响应式设计。”

课程 (The lesson)

With the CSS Grid layout, you aren’t bound to a set number of rows or columns.

使用CSS Grid布局，您不必绑定到一定数量的行或列。

You also don’t have to create 12 columns every time. If you don’t need 12 columns, don’t create them. The CSS Grid isn’t another grid based CSS framework.

您也不必每次都创建12列。如果不需要12列，则不要创建它们。 CSS网格不是另一个基于网格CSS框架。

You’re free.

你自由了。

As pointed out by Per Harald Borgen, you may create 12 columns if you want to experiment with white spaces between columns.

正如Per Harald Borgen指出的那样，如果您要尝试在列之间使用空白，则可以创建12列。

Other than that, create the number of columns you really need, and get on with the design.

除此之外，创建您真正需要的列数，然后继续进行设计。

使用CSS网格布局可以使网络向前发展 (Using the CSS Grid layout moves the web forward)

I read an answer to why Apple keeps getting rid of things, instead of adding them.

我读了一个答案，解释了为什么Apple不断摆脱事物而不是添加事物。

There, I learned this:

在那里，我学到了这一点：

“Supporting legacy is not always the best answer. Dropping things helps the industry move forward to adopt newer, better, formats.”

“支持传统并不总是最好的答案。放下东西可以帮助行业向前迈进，采用更新，更好的格式。”

In the same way, choosing to learn and use the CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community. A community we so love, and want to grow.

以同样的方式，选择学习和使用CSS Grid可以使网络发展。它可以帮助行业采用更新更好的格式。它帮助我们成长为一个社区。我们热爱并希望成长的社区。

Be like Khalid. Start using the CSS Grid if you can.

像哈立德一样。如果可以，请开始使用CSS网格。

Where possible, invest in a decent CSS Grid education. You’ll be helping to move the web forward.

在可能的情况下，投资进行体面CSS Grid教育。您将帮助推动网络向前发展。