css网格

by Shooting Unicorns

通过射击独角兽

使用CSS网格构建的澳大利亚初创企业的周期表 (The Periodic Table of Australian Startups Built With CSS Grid ??)

This month the two derp developers at Shooting Unicorns embarked on their journey to learn CSS Grid by building a periodic table. As a little tribute to working in corporate for 5 years and recently bidding farewell to join the startup life, the derps believed that sharing corporate buzzwords would be the perfect project.

本月， Shooting Unicorns的两位derp开发人员开始了通过构建周期表来学习CSS Grid的旅程。 为了向在公司工作了5年致敬，并最近告别加入创业公司的日子，Derps认为共享公司流行语将是一个完美的项目。

1. Put it on the blockchain放在区块链上
2. Disruptive technology破坏性技术
3. We’re an agile company我们是一家敏捷公司
4. Bleeding edge technology尖端技术
5. It’s in the cloud在云端
6. Our designs are human-centric我们的设计以人为本
7. Digital transformation数字化转型
8. Thought leadership精神领袖
9. Big data and analytics大数据与分析
10. 360-degree view360度视角
11. Bespoke designs定制设计
12. It’s IoT enabled支持物联网
13. Creating synergies创造协同效应
14. Breaking down the silos打破筒仓
15. Real-time automation实时自动化
16. … ?……？

But little did they know that there are actually a total of 118 elements in a periodic table. It soon became apparent to them that coming up with that many corporate buzzwords was going to be tougher than learning CSS Grid itself. No doubt, the corporate world is littered with thousands upon thousands of buzzwords, but unfortunately for the duo, recalling any more than 7 plus or minus 2 items would be deemed a very difficult task.

但是他们几乎不知道，元素周期表中实际上总共有118个元素。 对他们来说，很快就发现，提出许多企业流行语比学习CSS Grid本身要困难得多。 毫无疑问，企业界到处都是成千上万的流行语，但不幸的是，这对二人组来说，回忆起超过7个正负2个项目将被认为是一项艰巨的任务。

Now they are left with no choice but to do what they do best… last minute pivoting! ?

现在，他们别无选择，只能去做自己最擅长的事……最后一刻！ ？

And thus… The Periodic Table of Australian Startups was made instead! Or as they like to call it, the Completely Selective Startup Grid (CSS Grid) (◔_◔)

因此…而是制作了澳大利亚初创公司的周期表 ！ 或者，就像他们喜欢的那样，完全选择启动网格(CSS Grid)(◔_◔)

想法 (The Idea)

In all seriousness, we were inspired by Deck, a presentation deck developed without using any Javascript which really inspired us to try it out.

认真地说，我们受到了Deck的启发， Deck是一个演示平台，它没有使用任何真正激发我们尝试一下的Javascript进行开发。

It is arguably the most powerful layout system available in CSS and allowed us to handle both columns and rows, making it multi-dimensional. We got super excited that day and really wanted to do our very own Shooting UnicornsDeck, but for some reason we settled on doing a periodic table instead ??.

它可以说是CSS中功能最强大的布局系统，它允许我们处理列和行，从而使其具有多维性。 那天我们非常兴奋，真的很想做我们自己的射击独角兽甲板，但是由于某些原因，我们决定改用元素周期表??。

We guess one reason would be that while the deck looks really cool, getting it to look pretty would have taken a huge chunk of time away from learning CSS grid itself. You can check out the Deck’s source code here.

我们猜测一个原因是，尽管平台看上去很酷，但要使其看起来更漂亮却需要花费大量时间来学习CSS网格本身。 您可以在此处查看Deck的源代码。

因此，在过去的两个星期中… (Therefore in the last two weeks…)

We followed what we believed to be the secret recipe and figured out the layout of the grid using…

我们遵循了我们认为是秘密的秘诀，并使用...确定了网格的布局。

To determine how many boxes the grid needed to be, we needed to think in terms of rows and columns, factoring in the blanks as well.

为了确定网格需要多少个盒子，我们需要考虑行和列，并考虑空白。

A periodic table has 118 elements. So if our math hasn’t failed us, to get our grid to look like one would require 18 columns and 9 rows making it a total of 162 boxes.

元素周期表包含118个元素。 因此，如果我们的数学没有失败，要使网格看起来像一个网格，将需要18列和9行，因此总共需要162个框。

Our first iteration of the periodic table was as follows:

我们对元素周期表的第一次迭代如下：

.firstElement {   grid-row: 1 / span 1;   grid-column: 1 / span 1;}

.secondElement {   grid-row: 2 / span 1;   grid-column: 1 / span 1;}

...nthElement{}

As you can imagine, after a while we eventually made 118 classes just to show the periodic table.… hmmm ?. Surely, there is a cleaner and more maintainable way to do this right? Therefore, we decided to not take matters into our own hands, and followed the example here.

可以想象，一段时间后，我们最终做了118个班级，只是为了展示元素周期表。 当然，有一种更清洁，更可维护的方式来执行此操作吗？ 因此，我们决定不把事情交到自己手中，然后按照以下示例进行操作。

We discovered that CSS grid uses magical layout algorithms which can determine the flow of the grid. If we don’t specify the direction of flow (using grid-auto-flow), then it will fill all columns in a row first before going to the next.

我们发现CSS网格使用神奇的布局算法来确定网格的流动。 如果我们不指定流向(使用grid-auto-flow)，那么它将先填充一行中的所有列，然后再进行下一行。

Round two. We deleted the original CSS code and started again. This time we were smarter. You can refer to the rest of this article following our source code here.

第二轮。 我们删除了原始CSS代码，然后重新开始。 这次我们更聪明了。 您可以在此处按照我们的源代码参考本文的其余部分。

Firstly, let’s take a look at the first row of the periodic table. The first element is automatically placed in row 1, column 1. By default, the second element will be placed in row 1, column 2, but that’s not what we want. Following the diagram, to place it in the 18th column, we can do it like so:

首先，让我们看一下元素周期表的第一行。 第一个元素自动放置在第1行第1列中。默认情况下，第二个元素将放置在第1行第2列中，但这不是我们想要的。 按照图，将其放置在第18列中，我们可以这样做：

.itemInEighteenthColumn {   grid-column-start: 18;}

So, to get the next element in the second column, we just tell CSS to place it in row 2 column 1 right?

因此，要获得第二列中的下一个元素，我们只是告诉CSS将其放置在第2行第1列中，对吗？

.thirdElement {   grid-column-start: 1;   grid-row-start: 2;}

That is one way, but in CSS grid, specifying a grid-column-start on a child element will automatically create that many numbers of columns. So in this case, we said that the second element should start at column 18, so our grid would contain 18 columns. Any element after that would flow to the next row.

这是一种方法，但是在CSS网格中，在子元素上指定grid-column-start将自动创建那么多列。 因此，在这种情况下，我们说第二个元素应从第18列开始，因此我们的网格将包含18列。 之后的任何元素都将流入下一行。

The same concept goes for the third element in the second row. We set the grid column start to row 13 to create that gap.

第二行中的第三个元素具有相同的概念。 我们将网格列的起始位置设置为第13行以创建该间隙。

.secondRowThirdElement {   grid-column-start: 13;}

This makes all the columns before row 13 blank, and the rest of the elements would assume their normal flow starting from 13 through to 18. The same goes for the next row after that:

这将使第13行之前的所有列为空白，其余元素将采用从13到18的正常流程。此后的下一行也是如此：

.secondRowThirdElement, .thirdRowThirdElement {   grid-column-start: 13;}

The only special case we had to cater for were the last two rows on the bottom, which required specific grid properties. The reason for this is that those elements weren’t the last few elements in our HTML, so they would end up misplaced in the rows above. To get those elements on row 8 and 9, we need to explicitly state the grid-row-start property to those individual elements (it is required to add those classes to each individual element in the HTML):

我们唯一需要满足的特殊情况是底部的最后两行，它们需要特定的网格属性。 原因是这些元素不是HTML中的最后几个元素，因此它们最终会放错位置。 为了使这些元素位于第8行和第9行，我们需要为这些单独的元素明确声明grid-row-start属性(需要将这些类添加到HTML中的每个单独的元素)：

.row-8 {   grid-row-start: 8;}

.row-9 {   grid-row-start: 9;}

And with this CSS Grid magic, we got our first periodic table.

有了CSS Grid的魔力，我们得到了第一个元素周期表。

剧本 (Scripts)

It would have taken way too much effort to manually copy and paste startup data into an HTML file. To get the job done, we created Python scripts to convert CSV into JSON and then from JSON into HTML. Here is a snippet of how we generated the HTML (not the best, but it worked nonetheless):

手动复制启动数据并将其粘贴到HTML文件中会花费很多精力。 为了完成这项工作，我们创建了Python脚本，将CSV转换为JSON，然后从JSON转换为HTML。 以下是我们如何生成HTML的摘要(虽然不是最好的，但是仍然有效)：

import json

with open('./startups.json') as startup_data:with open('./startups.html', 'w+') as f:

d = json.load(startup_data)   for startup in d:   name = startup['name']   city = startup['city']   founded = startup['founded']   description = startup['description']      htmlString= "\   <div class=\"startup-detail-container %s\"> \n\   <div class=\"startup-em\"></div>\n\   <div class=\"name\">%s</div>\n\   <div class=\"description\">%s</div>\n\   </div>\n\n"%(city.lower(), name, description)   f.write(htmlString.encode('utf-8'))

There were additional scripts that were used to clean and add extra information to the existing data, but we won’t bore you with the details.

还有其他脚本可用于清理现有数据并将其添加到现有数据中，但我们不会为您带来任何细节。

剩下的难题 (The rest of the puzzle)

From here on out, the rest was pushing pixels and playing around with colors. We initially went with the Shooting Unicorns color scheme, but as colorful as it looks, the theme seemed a bit ‘un-themed’.

从这里开始，其余的就是推动像素并玩弄颜色。 最初，我们采用Shooting Unicorns配色方案，但看起来色彩丰富，但主题似乎有点“没有主题”。

Many days later… we eventually settled on none other than the colors from our terminal… because… developers.

许多天后……我们最终决定只使用终端上的颜色……因为……开发人员。

We’re still very new to CSS, but we hope this project will at least inspire or help others to do the same thing. If you haven’t seen our code yet, you can check out our repo here. We would also love to get any feedback on how we could improve the current codebase, too. Please feel free to share your thoughts below or even raise a pull request!

我们对CSS还是很陌生，但是我们希望这个项目至少可以激发或帮助他人做同样的事情。 如果您还没有看到我们的代码，可以在此处查看我们的仓库。 我们也很想获得关于如何改进当前代码库的任何反馈。 请随时在下面分享您的想法，甚至提出请求请求！

下一步是什么？ ？ (What’s Next? ?)

Each month Shooting Unicorns will ship a passion project while learning a different technology. For January, it was a React project called Hustle Club, a platform that helps people find the perfect accelerator in beautiful Australia.

每个月， 射击独角兽都会在学习其他技术的同时发动激情项目。 一月份，这是一个名为Hustle Club的React项目，该平台可帮助人们在美丽的澳大利亚找到理想的加速器。

In March, we’ll be sharing everything we learned in Swift wrapped up in a little bow. You’ll see exactly how we hacked our way from startups through to enterprises!

3月，我们将分享我们在Swift中学到的所有知识，并鞠躬致辞。 您会确切地看到我们是如何从初创企业到企业的！

Stay tuned and until next time, happy hacking!

请继续关注，直到下一次，祝您黑客愉快！

Amount of times pivoted: 100% ✌️

枢纽次数：100％✌️

翻译自: https://www.freecodecamp.org/news/the-periodic-table-of-australian-startups-4ab76b79ee34/

css网格