農民約翰是一個驚人的會計_我的朋友約翰在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教育。您將幫助推動網絡向前發展。